vue实现购物车全选，总计等功能 |
您所在的位置：网站首页 › vue表格全选 › vue实现购物车全选，总计等功能 |
vue实现购物车全选，总计等功能
|
一、单价商品的小计 整个操作过程是，商品的数量是可以控制的，可增可减，最少为1。并且在数量的变化中，商品的小计也在变化。 二、单选选中商品 在购物车中，需要选择当前想买的商品，这一功能成为商品的单选，并且在选中商品的同时，总金额会累加上选中的商品总价。 三、全选选中商品 全选就是一键选中所有商品，然后总金额是所有商品的总价的总和。取消全选有两个方式：一是直接按取消全选，而是取消任何一个商品的选中。 四、删除商品 代码如下： table { border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } #app { margin: 0 auto; } th, td { padding: 8px 16px; border: 1px solid #e9e9e9; text-align: left; width: 100px; text-align: center; } th { background-color: #f7f7f7; color: #5c6b77; font-weight: 600; } 全选： Id 书籍名称 出版日期 价格 购买数量 小计 操作 {{item.id}} {{item.name}} {{item.date}} {{item.price | getprice}} - {{item.num}} + {{item.num*item.price | getprice}} 移除 总计：{{totalprice | getprice}} 购物车为空 let vue = new Vue({ el: "#app", data: { books: [ { id: 1, name: "《水浒传》", date: "2006-9", price: 20, num: 1, check: true }, { id: 2, name: "《红楼梦》", date: "2006-7", price: 80, num: 1, check: true }, { id: 3, name: "《三国演义》", date: "2008-9", price: 60, num: 1, check: true }, { id: 4, name: "《西游记》", date: "2008-2", price: 120, num: 1, check: true }, ], // 全选按钮绑定 Allcheck: true, }, methods: { // 删除 reItem(index) { this.books.splice(index, 1) }, // 全选 allcheck() { this.Allcheck = !this.Allcheck; this.books.forEach(element => { element.check = this.Allcheck }); }, // 单选 aloncheck(index) { this.books[index].check = !this.books[index].check; for (const i in this.books) { const element = this.books[i]; if (element.check == false) { this.Allcheck = false; return; } else { this.Allcheck = true; } } } }, // 过滤器 将价格转换为￥20.00的格式 filters: { getprice(val) { return "￥" + val.toFixed(2); } }, // 计算属性（求总计） computed: { totalprice() { let total = 0; this.books.forEach(element => { if(element.check==true){ total += element.price * element.num; } }); return total; }, }, }) |
【本文地址】
今日新闻 |
推荐新闻 |