练习案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<input type="checkbox" @change="handleisAllcheck" v-model="checkallbox" >
<ul>
<li v-for="data in datalist">
<input type="checkbox" v-model="checkgroup" :value="data" @change="handleischeck">
{{data}}
<button @click="handleDelclick(data)">del</button>
{{data.number}}
<button @click="data.number++">add</button>
</li>
</ul>
{{checkgroup}}
<p>总计算金额:{{getsum()}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#box',
data: {
checkallbox: false,
checkgroup: [],
datalist: [
{
name: '商品1',
price: 10,
number: 2,
id: 1
},
{
name: '商品1',
price: 20,
number: 5,
id: 2
},{
name: '商品1',
price: 30,
number: 6,
id: 3
}
]
},
methods: {
getsum(){
var sum=0;
for(i in this.checkgroup){
sum+= this.checkgroup[i].number*this.checkgroup[i].price;
}
return sum;
},
handleisAllcheck(){
console.log("改变了"+this.checkallbox);
if(this.checkallbox){
this.checkgroup=this.datalist;
this.checkallbox=false;
}else{
this.checkgroup=[];
}
},
handleischeck(){
//判斷是否全部勾選
if(this.checkgroup.length === this.datalist.length){
this.checkallbox=true;
}else{
this.checkallbox=false;
}
},
handleDelclick(data){
var number=data.number--;
if(number===0){
data.number=1;
}
}
}
})
</script>
</body>
</html>