<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if="hasGoods">
<label for="check-all">
全选
</label>
<input id="check-all" type="checkbox" v-model="isCheckAll" @change="allCheck" />
<ul>
<li v-for="(i, index) in datalist">
<input type="checkbox" v-bind:id=i.id v-model="checkgroup" :value="i" @change="isAllCheck">
<label v-bind:for=i.id>
商品名称：{{i.name}}
价格：<span>{{i.price}}</span>
</label>
<button @click="sub(i)">-</button>
数量：<span>{{i.count}}</span>
<button @click="add(i)">+</button>
<button @click="del(i, index)">移除</button>
</li>
</ul>
<p>
<span>总计：{{ total|filter }}</span>
</p>
<p>{{checkgroup}}</p>
</div>
<div v-else>
空空如也
</div>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
isCheckAll: false,
checkgroup: [],
datalist: [
{ id: "1", name: '裤子', price: '100', count: 1 },
{ id: "2", name: '卫衣', price: '100', count: 1 },
{ id: "3", name: '风扇', price: '100', count: 1 },
{ id: "4", name: '苹果', price: '100', count: 1 },
]
},
computed: {
hasGoods:function(){
if(this.datalist.length > 0){
return true;
}else{
return false;
}
},
total: function () {
var sum = 0;
for (var i in this.checkgroup) {
sum += this.checkgroup[i].price * this.checkgroup[i].count;
}
return sum;
},
},
methods: {
allCheck: function () {
if (this.isCheckAll) {
this.checkgroup = this.datalist;
} else {
this.checkgroup = [];
}
},
isAllCheck: function () {
if (this.checkgroup.length === this.datalist.length && this.checkgroup.length > 0) {
this.isCheckAll = true;
} else {
this.isCheckAll = false;
}
},
add: function (g) {
g.count++;
},
sub: function (g) {
if (g.count === 1) {
return;
}
g.count--;
},
del: function (g, index) {
this.datalist.splice(index, 1)
let theIndex = this.checkgroup.indexOf(g)
if(theIndex != -1){
this.checkgroup.splice(theIndex, 1)
}
},
},
filters: {
filter: function (pra) {
return "￥" + pra + "元"
},
}
})
</script>
</body>
</html>
