Uniapp小程序用Vue 2语法写出购物车单选全选
时间: 2023-12-06 19:39:36 浏览: 96
可以参考以下代码实现购物车单选全选功能:
```
<template>
<div>
<div v-for="(item, index) in cartList" :key="index">
<label>
<input type="checkbox" v-model="item.checked" @change="handleCheckboxChange">
{{ item.name }}
</label>
<span>{{ item.price }}</span>
</div>
<div>
<label>
<input type="checkbox" v-model="isAllChecked" @change="handleAllCheckboxChange">
全选
</label>
<span>{{ totalPrice }}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
cartList: [
{ name: '商品1', price: 10, checked: false },
{ name: '商品2', price: 20, checked: false },
{ name: '商品3', price: 30, checked: false }
]
}
},
computed: {
isAllChecked() {
return this.cartList.every(item => item.checked)
},
totalPrice() {
return this.cartList.filter(item => item.checked).reduce((total, item) => total + item.price, 0)
}
},
methods: {
handleCheckboxChange() {
this.$nextTick(() => {
this.isAllChecked = this.cartList.every(item => item.checked)
})
},
handleAllCheckboxChange() {
this.cartList.forEach(item => {
item.checked = this.isAllChecked
})
}
}
}
</script>
```
在上面的代码中,我们首先定义了一个 `cartList` 数组来存储购物车中的商品信息,每个商品包括名称、价格和是否选中三个属性。接着,我们通过 `v-for` 指令遍历 `cartList` 数组,动态生成购物车列表。
在购物车列表中,我们使用了一个复选框来表示每个商品的选中状态,使用了 `v-model` 指令来双向绑定商品的 `checked` 属性。当用户点击某个商品的复选框时,我们通过 `@change` 监听其变化,并在 `handleCheckboxChange` 方法中更新全选复选框的选中状态。
在最后一行,我们使用了一个全选复选框来表示购物车中所有商品的选中状态。与单个商品的复选框类似,我们使用了 `v-model` 指令来双向绑定全选复选框的 `isAllChecked` 属性。当用户点击全选复选框时,我们通过 `@change` 监听其变化,并在 `handleAllCheckboxChange` 方法中更新所有商品的选中状态。同时,我们还使用了计算属性来计算购物车中所有选中商品的总价。
阅读全文