本文实例为大家分享了Vue在购物车场景下的应用,供大家参考,具体内容如下
<>强购物车场景需求:
1。商品,店铺,购物车的选择
2。商品删除
<>强关键代码
测试数据
var _list=[{
检查:假的,
商品:[{
名称:“商品1”,
价格:23日,
检查:假
})
},{
检查:假的,
商品:[{
名称:“商品2”,
价格:20,
检查:假
},{
名称:“商品3”,
价格:30,
检查:假
})
});
之前
店铺对象组成购物车数组_list
商品对象组成店铺对象下的商品数组商品
每个商品和店铺都有自己的检查字段
<强>一。选择商品
<李>选择商品李
<李>选择店铺下的所有商品李
<李>选择购物车里的所有商品
李
数据绑定
& lt;身体类=在“应用程序”;
& lt;输入类型=v=案囱】蛄斜怼３ざ萩heckedAll“v模型=比;
& lt; div v=" (shopI、商店)名单”类=吧痰辍北?
& lt;输入类型=案囱】颉眝模型=皊hop.checked”比;
& lt; div v="(我、好)在商店。类商品”=昂谩北?
& lt;输入类型=案囱】颉眝模型=癵ood.checked”比;
& lt;跨度v-html=" good.name "祝辞& lt;/span>
& lt;跨度v-html=" good.age "祝辞& lt;/span>
& lt;/div>
& lt;/div>
& lt;/body>
之前
var vue=new vue ({
埃尔:“.app”,
数据:{
列表:_list
}
})；
之前
监听购物车全选
计算:{
checkedAll:函数(){
返回。checkedShopsCount==this.list.length;
},
checkedShopsCount:函数(){
var=0;
this.list.forEach(函数(项){
如果项目。检查==true)我+ +;
})；
返回我;
}
}
之前
当店铺选择数(checkedShopsCount)等于店铺数(列表。长度)时,购物车全选(checkedAll)为真正的
商品,店铺选择事件
& lt;输入类型=v=案囱】蛄斜怼！皏模型长度=" checkedAll " @change=" setAllChecked(事件)美元”在
& lt; div v=" (shopI、商店)名单”比;
& lt;输入类型=案囱】颉眝模型="商店。检查“@change=" setGoodChecked(店)”在
& lt; div v="(我、好)shop.goods”比;
& lt;输入类型=案囱】颉眝模型="好。检查“@change=" setShopChecked(好,店)”在
& lt;跨度v-html=" good.name "祝辞& lt;/span>
& lt;跨度v-html=" good.age "祝辞& lt;/span>
& lt;/div>
& lt;/div>
之前
方法:{
setAllChecked:函数(e) {
this.list.forEach(函数(商店){
商店。检查=e.target.checked;
shop.goods.forEach(函数(好){
好。检查=e.target.checked;
})；
})；
},
setGoodChecked:函数(商店){
shop.goods.forEach(函数(好){
好。检查=shop.checked;
})；
},
setShopChecked:函数(好,商店){
如果(! good.checked) {
商店。检查=false;
其他}{//检查店铺是否存在检查为虚假的商品
商店。检查=! shop.goods.find(函数(好){
返回! good.checked;
})；
}
}
}
之前
选择购物车时执行setAllChecked,此时选择所有商品和店铺
选择店铺时执行setGoodChecked,此时选择该店铺下所有商品
选择商品时执行setShopChecked
,,当商品检查为假时,取消选择当前店铺
,,当商品检查为真时,判断当前店铺是否选择了所有商品,是则选择当前店铺,否则取消选择当前店铺
<强>二,删除商品
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/删除“@click=癲eleteGood(商店,我,列表,shopI)”在
之前
方法:{
deleteGood:函数(商店,我,列表,shopI) {
shop.goods。拼接(我,1);
如果(shop.goods.length==0) {
列表。拼接(shopI, 1);
}
}
}
之前
全部代码
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>我的购物车& lt;/title>
& lt;脚本src=" https://www.yisu.com/zixun/vue.min.js "祝辞& lt;/script>
& lt;/head>
& lt;身体类=在“应用程序”;
& lt;输入类型=v=案囱】蛄斜怼！皏模型长度=" checkedAll " @change=" setAllChecked(事件)美元”在
& lt; div v=" (shopI、商店)名单”比;
& lt;输入类型=案囱】颉眝模型="商店。检查“@change=" setGoodChecked(店)”在
& lt; div v="(我、好)shop.goods”比;
& lt;输入类型=案囱】颉眝模型="好。检查“@change=" setShopChecked(好,店)”在
& lt;跨度v-html=" good.name "祝辞& lt;/span>
& lt;跨度v-html=" good.age "祝辞& lt;/span>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/删除“@click=癲eleteGood(商店,我,列表,shopI)”在
& lt;/div>
& lt;/div>
& lt;/body>
& lt; script>
var _list=[{
检查:假的,
商品:[{
名称:“商品1”,
金钱:23日,
检查:假
})
},{
检查:假的,
商品:[{
名称:“商品2”,
金钱:20,
检查:假
},{
名称:“商品3”,
钱:30,
检查:假
})
});
var vue=new vue ({
埃尔:“.app”,
数据:{
列表:_list
},
计算:{
checkedAll:函数(){
返回。checkedShopsCount==this.list.length;
},
checkedShopsCount:函数(){
var=0;
this.list.forEach(函数(项){
如果项目。检查==true)我+ +;
})；
返回我;
}
},
方法:{
setGoodChecked:函数(商店){
shop.goods.forEach(函数(好){
好。检查=shop.checked;
})；
},
setShopChecked:函数(好,商店){
如果(! good.checked) {
商店。检查=false;
其他}{
商店。检查=! shop.goods.find(函数(好){
返回! good.checked;
})；
}
},
setAllChecked:函数(e) {
this.list.forEach(函数(商店){
商店。检查=e.target.checked;
shop.goods.forEach(函数(好){
好。检查=e.target.checked;
})；
})；
},
deleteGood:函数(商店,我,列表,shopI) {
shop.goods。拼接(我,1);
如果(shop.goods。长度==0){
列表。拼接(shopI, 1);
}
}
}
})；
& lt;/script>
& lt;/html>
