需求
- 可以单独选中商品
- 可以一键选中全部商品
- 可以动态改变商品数量
- 商品最小数量为1
- 可以动态计算选中商品价格
效果图
代码
- 通过cdn引入vue
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
- 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>
- 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>