极简购物车

需求

1. 可以单独选中商品
2. 可以一键选中全部商品
3. 可以动态改变商品数量
4. 商品最小数量为1
5. 可以动态计算选中商品价格

效果图

代码

1. 通过cdn引入vue

   <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
   

2. html部分

   <div id="app">
     <ul>
       <input type="checkbox" v-model="checkAll" @change="checkAllProduct">全选
       <li v-for="item in list">
         <input type="checkbox" :value="item" v-model="checkList">{{item}}
         <button @click="changeNum(item,-1)" :disabled="item.num === 1">-</button>{{item.num}}<button @click="changeNum(item,1)">+</button>
       </li>
       <p>总价:{{getAllPrice}}</p>
     </ul>
   </div>
   

3. js部分

   <script>
     var vm = new Vue({
       el:'#app',
       data:{
         checkAll: false, // 是否全选
         checkList: [],   // 选中商品列表
         list:[          // 购物车商品列表
           {name:"鼠标",price:20,num:1},
           {name:"键盘",price:30,num:2},
           {name:"水杯",price:10,num:1},
         ]
       },
       computed: {
         // 计算选中商品总价格
         getAllPrice(){
           // 检测是否选中所有的商品
           this.checkAll = this.checkList.length === this.list.length ? true : false;
           return this.checkList.reduce((sum,item) => sum += item.num * item.price, 0);
         }
       },
       methods: {
         // 点击全选操作
         checkAllProduct(){
           this.checkList = this.checkAll ? this.list:[];
         },
         // 更改商品数量
         changeNum(item,n){
           if (!(item.num === 1 && n === -1)){
             item.num += n;
           }
         }
       },
     })
   </script>