vue购物车功能实现思路,前端vue购物车逻辑
这篇文章主要为大家详细介绍了vue vant实现购物车全选和反选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue vant实现购物车全选和反选的具体代码，供大家参考，具体内容如下
这是效果图：
话不多少，直接上代码：
模板
div class=购物车
“key=”item中的div class= ST-spacing-main v-for=(item)。id
div class=st-item产品-项目
div class= ST-border-bottom store-title
p @click=checkShop(item)
货车-复选框v-model=item.checked
跨度
{{item.shopTitle}}
van-icon name=arrow/
/span
/凡-复选框
/p
/div
ul class= commodity-list v-for=(优点，价值)中的项目。“产品列表”:key=“值”
li @click=ischeck(item，pros)
van-checkbox v-model= pro。已选中/van-复选框
/李
里
//这是商品组件
产品购物车大小=迷你类型=数字:选项= 3 /产品购物车
/李
/ul
/div
/div
van-submit-bar class= settlement :price= 10060 button-text=去结算@submit=onSubmit
van-checkbox v-model= isCheckAll @ click= check all()全选/凡-复选框
span class=购物车-运费slot=默认不含运费/span
/凡-提交-栏
/div
/模板
脚本
导出默认值{
data () {
返回{
cartInfoList: [
{
id: 1，
商店名称： 苹果旗舰店, //商店名
选中：假，//商店选择的状态
checkedCount: 0，//此商店被选择的商品数量
产品列表：[
{
isChecked: false，//商品选择状态
产品名称： 2019年款macbook/苹果/MF893/A国航笔记本, //产品名
类别： 15寸/2.3/8G/256/土豪金/标准套餐，
价格：10200,//价格
计数：1 //数量
}
]
},
{
id: 2，
商店名称： 锤子科技旗舰店，
已检查：错误，
检查次数：0
产品列表：[
{
isChecked: false，
产品标题： 锤子手机手感保护膜，
类别： 登陆月球，
价格：9.9,
计数：1
},
{
isChecked: false，
产品标题： 锤子手机赞成割手版，
类别： 128克/割手版，
价格：1790,
计数：1
}
]
}
],
isCheckAll: false，//是否全选
allPrice: 0，//所有价格
所有商店：0,//被选中的商店数量
allCount: 0 //被选中的产品数量
}
},
方法：{
//选中单个商品
ischeck (item，pro) {
//为未选中的时候改变为假的，反之为真实的
！pro.isChecked？这个. checkTrue(item，pro):这个. checkFalse(item，pro)
},
//修改单个商品的真实的
_checkTrue (item，pro) {
pro.isChecked=true //将商品选中状态改为真实的
//这里执行了两部，选中商品数量先1,再与该店铺商品数量比较，如果相等就更改店铺选中状态为真实的
如果(项。检查计数===项目。产品列表。长度){
item.checked=true
}否则{
返回""
}
//项目。检查计数===项目。产品列表。长度？item.checked=true:" "
//如果店铺选中状态改为没错，选中店铺数量先1,再与店铺数量比较，如果相等就更改全选选中状态为真实的
////当商店全选状态，每全选一个商店，被选中商店数加一，数值等于所有商店数，全选状态为真实的
if (item.checked) {
如果(这个。所有店铺===这个。卡廷福里斯特。长度){
this.isCheckAll=true
}否则{
this.isCheckAll=false
}
}否则{
返回""
}
//item.checked？这个。所有店铺===这个。卡廷福里斯特。长度？这个。ischeckall=true:this。ischeckall=false:" "
},
//修改单个商品的错误的
_checkFalse (item，pro) {
pro.isChecked=false //将商品选中状态改为错误的
- item.checkedCount //被选中的商品数减一
if (item.checked) {
//如果店铺是被选中的，更改店铺选中状态
item.checked=false //当商店状态为选中时改变错误的
- this.allShops //商店数减一
}
this.isCheckAll=false //全选状态为错误的
},
//选择整个商店的商品
验货点（商品){
！检查过了吗？这个. shopTrue(item):这个. shopFalse(项目)
},
//遍历商店每个商品，状态为错误的的改变为没错，又在_checkTrue()方法中将商店状态改为真实的
_shopTrue (item) {
item.productList.forEach(pro={
if (pro.isChecked===false) {
这个. checkTrue(item，pro)
}否则{
返回""
}
//pro.isChecked===false？这个. checkTrue(item，pro):
})
},
_shopFalse (item) {
item.productList.forEach(pro={
//同上
if (pro.isChecked===true) {
这个. checkFalse(item，pro)
}否则{
返回""
}
//pro.isChecked===true？这个. checkFalse(item，pro):
})
},
//选择全部商店的商品，已经计算总价和总数量的函数
checkAll () {
//方法内调用方法
this.isCheckAll=！this.isCheckAll
this.isCheckAll
？这个。卡廷福里斯特。foreach(item={
这个. shopTrue(项目)
})
:这个。卡廷福里斯特。foreach(item={
这个. shopFalse(项目)
})
},
_totalPeice () {
//每次调用此方法，将初始值为0,遍历价格并累加
this.allPrice=0
这个。卡廷福里斯特。foreach(item={
let products=item.productList
products.forEach(pros={
if (pros.isChecked) {
这个。所有价格=优点。价格* pro。数数
}
})
})
},
_totalCount () {
//同上
this.allCount=0
这个。卡廷福里斯特。foreach(item={
这个。所有计数=项目。检查计数
})
},
onSubmit () {}
},
观察：{
//深度监听所有数据，每次改变重新计算总价和总数
cartInfoList: {
深：真的，
处理程序(瓦尔，老瓦尔){
这个. totalPeice()
这个. totalCount()
}
}
}
}
/脚本
style lang=less 范围
@导入./资产/更少/视图/购物车。少’；
/风格
较少的文件
@ spacing-size:29雷姆；主购物车{。圣-项目-标题{
填充：@ spacing-size；
对齐-内容：灵活开始；主题-复选框{
margin-right:@ spacing-size；
}
}。项目列表{
左填充：77雷姆；
位置：相对；主题-复选框{
页边距-顶部：-.24r em
位置：绝对；
左：0;
top:50%；
}
}
}
关于vue。j组件的教程，请大家点击专题vue。j组件学习教程进行学习。
更多某视频剪辑软件学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。