Vue.js implements shopping cart and v-for to implement checkbox check box selection
1. Realize the effect
2. Code implementation
2.1.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车实例</title>
</head>
<body>
<div id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th><input type="checkbox" @click="checkAll" v-model="checkall"></th>
<th>商品名称</th>
<th>商品单价</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td><input type="checkbox" v-model="checked" :value="item.id"></td>
<td>{{ item.name}}</td>
<td>{{ item.price}}</td>
<td>
<button @click="handleReduce(index)" :disabled="item.count ===1">-</button>
{{item.count}}
<button @click="handleAdd(index)">+</button>
</td>
<td><button @click="handleRemove(index)">移除</button></td>
</tr>
</tbody>
</table>
<div>总价：{{ totalPrice }}</div>
<div>{{checked}}</div>
</template>
<div v-else>购物车为空</div>
</div>
</body>
<script type="text/javascript">
</script>
<script src="index.js"></script>
</html>2.2 js part
var app = new Vue({
el: '#app',
data: {
list: [
{
id: 1,
name: 'iPhone 7',
price: 16188,
count: 1
},
{
id: 2,
name: 'iPhone 8',
price: 16188,
count: 1
},
{
id: 3,
name: 'iPhone X',
price: 16188,
count: 1
}
],
checkall: false,
checked: []
},
computed: {
totalPrice: function(){
var total = 0;
for(var i=0;i<this.list.length;i++){
var item = this.list[i];
total += item.price * item.count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
}
},
methods: {
handleReduce: function(index){
if(this.list[index].count === 1) return;
this.list[index].count--;
},
handleAdd: function(index){
this.list[index].count++;
},
handleRemove: function(index){
this.list.splice(index,1);
},
checkAll: function () {
var _this = this
if (this.checkall) {
// 实现反选
this.checked = []
} else {
// 实现全选
this.checked = []
this.list.forEach(function (item) {
_this.checked.push(item.id)
})
}
if (this.checked.length === this.list.length) {
this.checkall = true
// console.log(this.checkall)
// console.log(this.checked)
}
}
}
})2.3 CSS Section
[v-cloak] {
display: none;
}
table{
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
th,td{
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th{
background: #f7f7f7;
color: #5c6b77;
font-weight: 600;
white-space: nowrap;
}