话不多说上效果图
贴代码:
html片段:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th>
<input type="checkbox" @change="change()" v-model="allCheck"/>
</th>
<th>编号</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="item.satus" @change="itemChange()"/></td>
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button
@click="Handle(index)"
:disabled="item.coutn===1">-</button>
{{item.count}}
<button
@click="Add(index)">+</button>
</td>
<td><button @click="remove(index)">移除</button></td>
</tr>
</tbody>
</table>
<div>总价¥{{pricetotale}}</div>
</template>
<div v-else>购物车为空</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>
js片段:
var app = new Vue({
el: '#app',
data: {
list: [{
id: 1,
name: "iPhone7",
price: 6188,
count: 1,
satus: false
},
{
id: 2,
name: "sunXing",
price: 2188,
count: 1,
satus: false
},
{
id: 3,
name: "iPad Pro",
price: 5188,
count: 1,
satus: false
},
{
id: 4,
name: "Macbook",
price: 8188,
count: 1,
satus: false
},
{
id: 5,
name: "huawei",
price: 1188,
count: 1,
satus: false
},
],
allCheck: false,
},
methods: {
//减商品数量
Handle: function(index) {
if(this.list[index].count === 1) return
this.list[index].count--;
},
//增加商品数量
Add: function(index) {
this.list[index].count++;
},
remove: function(index) {
this.list.splice(index, 1)
},
//全选
change: function() {
var vm=this;
vm.list.forEach(function(v, o) {
v.satus = vm.allCheck
})
},
//单选勾住后全选
itemChange:function(){
var vm=this;
var select=vm.list.filter(function(v,o){
return v.satus == true
})
select.length==vm.list.length ? vm.allCheck=true:vm.allCheck=false
}
},
computed: {
//计算总价
pricetotale: function() {
var tatol = 0;
for(var i = 0; i < this.list.length; i++) {
var item = this.list[i];
if(item.satus==true){
tatol += item.price * item.count
}
}
//千位分隔符正则
return tatol.toString().replace(/\B(?=(\d{3})+$)/g, ',')
}
}
})