vue使用监听器进行监听,根据商品类别和数量,显示商品种类数和总价
时间: 2024-05-07 11:18:34 浏览: 19
可以使用Vue的计算属性来实现这个功能。首先在data中定义商品列表和商品类别的数量,然后使用计算属性根据商品列表和商品类别的数量来计算商品种类数和总价。
示例代码如下:
```
<template>
<div>
<div v-for="item in items" :key="item.id">
<input type="checkbox" v-model="item.checked">{{ item.name }} - {{ item.price }}
<input type="number" v-model="item.quantity">
</div>
<p>商品种类数:{{ categoryCount }}</p>
<p>总价:{{ totalPrice }}</p>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '苹果', price: 5, quantity: 0, category: '水果', checked: false },
{ id: 2, name: '香蕉', price: 3, quantity: 0, category: '水果', checked: false },
{ id: 3, name: '牛奶', price: 10, quantity: 0, category: '饮料', checked: false },
{ id: 4, name: '可乐', price: 4, quantity: 0, category: '饮料', checked: false }
]
}
},
computed: {
categoryCount() {
const categories = new Set(this.items.filter(item => item.checked).map(item => item.category))
return categories.size
},
totalPrice() {
return this.items.filter(item => item.checked).reduce((sum, item) => sum + item.price * item.quantity, 0)
}
}
}
</script>
```
在示例代码中,我们使用v-for指令来遍历商品列表,使用v-model指令来双向绑定商品的选择和数量。
在计算属性中,我们使用Set数据结构来统计选中商品的类别数量,使用reduce方法来计算选中商品的总价。最后在模板中使用{{ }}语法来显示商品种类数和总价。