根据表单的双向绑定，实现购物车的基本功能：
计算总价
商品增加
商品删除
全选
<!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>
<style>
</style>
</head>
<body>
<div id="app">
<!--1. 全选按钮：当选择该按钮时，选中全部商品，否则全不选
可通过布尔变量checkAll来控制
@change="allChange": 当该按钮变化时，触发事件allChange
注意：当有商品取消选中时，则取消全选
-->
全选：<input type="checkbox" @change="allChange" v-model="checkAll" />
<!--2. 商品列表
注意：当某个商品没有选中时，则全选按钮为未选中状态
因此为每个选项添加事件 @change="liChange"
-->
<ul>
<li v-for="data in datalist">
<input type="checkbox" @change="liChange" v-model="group" :value="data"/>
{{data}}
<!--3. 为每个商品添加：减小 当前数目 增加
增加：可直接通过data.number++实现
减小：由于可能出现负值，需要调用方法subClick实现
-->
<button @click="subClick(data)">sub</button>
{{data.number}}
<button @click="data.number++">add</button>
</li>
</ul>
{{group}}
<p>商品总金额：{{getSum()}}</p>
</div>
<script>
var v = new Vue({
el: "#app",
data:{
checkAll:false,
group:[],
datalist:[
{
name:"商品1",
price:10,
number:1,
id:"1",
},
{
name:"商品2",
price:20,
number:2,
id:"3",
},
{
name:"商品3",
price:30,
number:3,
id:"3",
}
]
},
methods:{
/*
1.获取选中商品的总金额
遍历选中的商品数组group，计算总金额，并返回
*/
getSum(){
var sum=0;
for(var i in this.group){
sum+=this.group[i].price*this.group[i].number
}
return sum
},
/*
2.当全选按钮发生变化时
*/
allChange(){
if(this.checkAll){//全选，则选中所有商品
this.group=this.datalist
}else{//全不选
this.group=[]
}
},
/*
3. 当商品的复选按钮发生变化时
需调整全选按钮：
商品全部选中时，checkAll=true
否则，checkAll=false
只需判断选中商品数组的长度和所有商品数组的长度是否相等
*/
liChange(){
if(this.group.length===this.datalist.length){//全选按钮为选中状态
this.checkAll=true
}else{//全选按钮为未选中状态
this.checkAll=false
}
},
/*
4.对商品数量进行减操作
商品数量不能为负值
*/
subClick(data){
data.number--;
if(data.number<0){
data.number=0;
}
}
}
})
</script>
</body>
</html>
