标签：-- value dcl and 全选 vue new cli compute
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<input type="checkbox" @change="handleAllChecked()" v-model="isAllChecked"/>
<ul>
<li v-for="data in datalist" :key="data.id">
<input type="checkbox" @change="handleChange()" v-model="checkgroup" :value="data"/>{{data}}
<button @click="handleDelClick(data)">del</button>
<input type="number" v-model="data.number"/>
<button @click="handleAddClick(data)">add</button>
</li>
</ul>
{{checkgroup}}
<p>总金额{{sum}}</p>
<p>计算属性总金额{{computedShopcarSum}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
checkgroup:[],
isAllChecked:false,
sum:0,
datalist:[
{
name:"商品1",
price:10,
number:1,
id:"1",
// url:"https://www.baidu.com/img/bd_logo1.png?qua=high"
},
{
name:"商品2",
price:20,
number:2,
id:"2",
// url:"https://www.baidu.com/img/bd_logo1.png?qua=high"
},
{
name:"商品3",
price:30,
number:3,
id:"3",
// url:"https://www.baidu.com/img/bd_logo1.png?qua=high"
}
]
},
methods:{
handleAllChecked(){
console.log("处理多选按钮",this.isAllChecked);
if(this.isAllChecked){
this.checkgroup = this.datalist;
}else{
this.checkgroup = [];
}
this.computedsum();
},
handleDelClick(data){
data.number--;
if(data.number===0){
data.number=1;
}
this.computedsum();
},
handleAddClick(data){
data.number++;
this.computedsum();
},
handleChange(){
// console.log("111")
if(this.checkgroup.length === this.datalist.length){
console.log("全选中")
this.isAllChecked = true;
}else{
console.log("没全选")
this.isAllChecked = false;
}
this.computedsum();
},
computedsum(){
console.log("重新计算总金额，关注已经勾选的数据，累加计算就可以了")
var mysum = 0;
for(var i=0;i<this.checkgroup.length;i++){
mysum += this.checkgroup[i].number*this.checkgroup[i].price;
}
this.sum = mysum;
}
},
computed:{
computedShopcarSum(){
var mysum = 0;
for(var i=0;i<this.checkgroup.length;i++){
mysum += this.checkgroup[i].number*this.checkgroup[i].price;
}
return mysum;
}
}
})
</script>
</body>
</html>
标签：-- value dcl and 全选 vue new cli compute
原文地址：https://www.cnblogs.com/taotao168/p/14428360.html
