vue实现购物车全选，总计等功能
一、单价商品的小计整个操作过程是，商品的数量是可以控制的，可增可减，最少为1。并且在数量的变化中，商品的小计也在变化。二、单选选中商品在购物车中，需要选择当前想买的商品，这一功能成为商品的单选，并且在选中商品的同时，总金额会累加上选中的商品总价。三、全选选中商品全选就是一键选中所有商品，然后总金额是所有商品的总价的总和。取消全选有两个方式：一是直接按取消全选，而是取消任何一个商品的选中。四、删除商
·
一、单价商品的小计
整个操作过程是，商品的数量是可以控制的，可增可减，最少为1。并且在数量的变化中，商品的小计也在变化。
二、单选选中商品
在购物车中，需要选择当前想买的商品，这一功能成为商品的单选，并且在选中商品的同时，总金额会累加上选中的商品总价。
三、全选选中商品
全选就是一键选中所有商品，然后总金额是所有商品的总价的总和。取消全选有两个方式：一是直接按取消全选，而是取消任何一个商品的选中。
四、删除商品
代码如下：
<style>
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;
}
</style>
</head>
<body>
<div id="app">
<div v-if="books.length">
<table>
<thead>
<tr>
<!-- 全选按钮 将按钮的选中状态与data数据中的Allcheck进行绑定，并添加点击事件 -->
<th style="text-align:left">全选：<input type="checkbox" :checked="Allcheck" @click="allcheck">
</th>
<th>Id</th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<table>
<tr v-for="(item,index) in books">
<!-- 单选按钮 将单选按钮与商品信息中的check属性进行绑定 添加点击事件 -->
<td><input type="checkbox" :checked="item.check" @click="aloncheck(index)"></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | getprice}}</td>
<td>
<button @click="item.num--" :disabled="item.num<=1">-</button>
{{item.num}}
<button @click="item.num++">+</button>
</td>
<td>{{item.num*item.price | getprice}}</td>
<td><button @click="reItem(index)">移除</button></td>
</tr>
</table>
</table>
<!-- 总计 -->
<h2>总计：{{totalprice | getprice}}</h2>
</div>
<div v-else>
<h2>购物车为空</h2>
</div>
</div>
<script src="./js/vue.min.js"></script>
<script>
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;
},
},
})
</script>
</body>
前往低代码交流专区
更多推荐
14
0- 0
已为社区贡献2条内容
所有评论(0)