本文主要介绍了如何使用Vue实现购物车选择功能,文中提供了具体的示例代码,为读者提供了参考。在这个购物车功能中,可以实现全选和单个商品选择,同时也给出了模拟数据的例子。以下是示例代码:
```html
<template>
<div id="app">
<!-- 全选 -->
<input type="checkbox" v-model="checkall" @change="check_all()" />
<div v-for="(item,index) in mylist" :key="index">
<span>{{item.oname}}</span>
<!-- 单个商品选择 -->
<input type="checkbox" v-model="item.this_all" @change="check_list(index)" />
<p v-for="(goods,nindex) in item.newlist" :key="nindex">
<input type="checkbox" />
<!-- 商品信息 -->
</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
checkall: false,
mylist: [
{
oname: '分类1',
this_all: false,
newlist: [
{
gid: 1,
gname: '商品1'
},
{
gid: 2,
gname: '商品2'
}
]
},
{
oname: '分类2',
this_all: false,
newlist: [
{
gid: 3,
gname: '商品3'
},
{
gid: 4,
gname: '商品4'
}
]
}
]
};
},
methods: {
check_all() {
// 全选
this.mylist.forEach(item => {
item.this_all = this.checkall;
});
},
check_list(index) {
// 单个选择
let flag = true;
this.mylist[index].newlist.forEach(goods => {
if (!goods.isChecked) {
flag = false;
}
});
this.mylist[index].this_all = flag;
}
}
};
</script>
```
以上代码展示了如何使用Vue创建购物车选择功能,包括全选和单个选择。希望这个示例能够对大家有所帮助,尽管这只是一个测试版本,并没有对界面和数据做太多设计。有兴趣的小伙伴可以参考这个代码,根据自己的需求进行修改和完善。Vue是一个非常强大的前端框架,可以帮助我们实现各种功能。祝大家编程愉快!