some：
return true是固定写法，终止some循环
erver：
filter：
优化写法：
arr.filter(item=>item.state).reduce((累加的结果,当前循环项)=>{},初始值)
拿上面的arr优化写法示例：
arr.filter(item=>item.state).reduce((amt,item)=>{
return amt += item.price*item.count
},0)
reduce:
二次简写：
const count = arr.filter(item=>item.state).reduce((amt,item)=>amt += item.price*item.count,0)
axios：
导入：methods:{ // 封装请求列表数据 async initCar(){ // 调用axios的get方法数据 const {data:res}=await axios.get('接口') console.log(res); } }, created(){ this.initCar() } 案例： <Goods v-for="item in list" :key="item.id" :title="item.goods_name" :img="item.goods_img" :Price="item.goods_price" :state="item.goods_state"> </Goods> import Goods from './components/Goods/Goods.vue' import axios from 'axios' components: { Header, Goods }, data() { return { // 储存购物车的列表数据，默认空数组 list: [], } }, methods: { // 封装请求列表数据 async initCar() { // 调用axios的get方法数据 const { data: res } = await axios.get('https://www.escook.cn/api/cart') // 请求到的数据需要渲染，则必须要转存到data上 console.log(res); if (res.status === 200) { this.list = res.list } } }, created() { this.initCar() console.log(this.list); } Title组件： <template> <div class="header-container">{{title}}</div> </template>
npm i axios -S
使用：
<script> export default { props:{ title:{ default:'', type:String, } } } </script>
<style lang="less" scoped> .header-container { font-size: 12px; height: 45px; width: 100%; background-color: #1d7bff; display: flex; justify-content: center; align-items: center; color: #fff; position: fixed; top: 0; z-index: 999; } </style> Goods 组件： <template> <div class="goods-container"> <!-- 左侧图片 --> <div class="thumb"> <div class="custom-control custom-checkbox"> <!-- 复选框 --> <input type="checkbox" class="custom-control-input" :id="'cb' + id" :checked="state" @change="statechange" /> <label class="custom-control-label" :for="'cb' + id"> <!-- 商品的缩略图 --> <img :src="img" alt="" /> </label> </div> </div> <!-- 右侧信息区域 --> <div class="goods-info"> <!-- 商品标题 --> <h6 class="goods-title">{{ title }}</h6> <div class="goods-info-bottom"> <!-- 商品价格 --> <span class="goods-price">￥{{ Price }}</span> <!-- 商品的数量 --> </div> </div> </div> </template>
<script> export default { props: { //在这里封装一个id是因为将来商品勾选状态变化后，需要子传父的形式，通知父组件，通知父组件，根据id修改对应商品的勾选状态 id: { required: true, type: true, }, title: { default: '', type: String, }, img: { default: '', type: String, }, Price: { default: '', type: Number, }, // 勾选状态 state: { default: true, type: Boolean, },
}, methods: { statechange(e) { const newState = e.target.checked this.$emit('state-change', { id: this.id, value: newState }) } }, } </script>
<style lang="less" scoped> .goods-container { +.goods-container { border-top: 1px solid #efefef; }
padding: 10px; display: flex;
.thumb { display: flex; align-items: center;
img { width: 100px; height: 100px; margin: 0 10px; } }
.goods-info { display: flex; flex-direction: column; justify-content: space-between; flex: 1;
.goods-title { font-weight: bold; font-size: 12px; }
.goods-info-bottom { display: flex; justify-content: space-between;
.goods-price { font-weight: bold; color: red; font-size: 13px; } } } } </style> Footer组件： <template> <div class="footer-container"> <!-- 左侧的全选 --> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="cbFull" :checked="isfull" @change="fullChange" /> <label class="custom-control-label" for="cbFull">全选</label> </div>
<!-- 中间的合计 --> <div> <span>合计：</span> <span class="total-price">￥{{ amm }}</span> </div>
<!-- 结算按钮 --> <button type="button" class="btn btn-primary btn-settle">结算（{{ amm.toFixed(2) }}）</button> </div> </template>
<script> export default { props:{ // 全选的状态 isfull:{ type:Boolean, default:true, }, amm:{ type:Number, default:0, } }, methods:{ fullChange(e){ this.$emit('full-change',e.target.checked) }, }
} </script>
<style lang="less" scoped> .footer-container { font-size: 12px; height: 50px; width: 100%; border-top: 1px solid #efefef; position: fixed; bottom: 0; background-color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; }
.custom-checkbox { display: flex; align-items: center; }
#cbFull { margin-right: 5px; }
.btn-settle { height: 80%; min-width: 110px; border-radius: 25px; font-size: 12px; }
.total-price { font-weight: bold; font-size: 14px; color: red; } </style> Counter组件:
标签：flex,axios,default,reduce,item,vue2,font,type From： https://www.cnblogs.com/wencaiguagua/p/16937853.html