vue计算属性初步使用案例

devtools/2024/11/18 17:12:05/

<template><div><h1>购物车</h1><div v-for="item in filteredItems" :key="item.id"><p>{{ item.name }} - {{ item.price }} 元</p><input type="number" v-model.number="item.quantity" min="1" /><button @click="removeItem(item.id)">移除</button></div><div><label>筛选价格(仅仅筛选单价)：<select v-model="priceFilter"><option value="all">全部</option><option value="under50">小于 50 元</option><option value="50to100">50 - 100 元</option><option value="above100">大于 100 元</option></select></label></div><h2>总价：{{ totalPrice }} 元</h2><button @click="clearCart">清空购物车</button></div>
</template><script>
export default {data() {return {cartItems: [{ id: 1, name: "商品 A", price: 30, quantity: 1 },{ id: 2, name: "商品 B", price: 60, quantity: 1 },{ id: 3, name: "商品 C", price: 120, quantity: 1 },],priceFilter: "all", // 筛选条件};},computed: {// 计算总价totalPrice() {return this.cartItems.reduce((total, item) => total + item.price * item.quantity,0);},// 根据筛选条件过滤商品filteredItems() {if (this.priceFilter === "under50") {return this.cartItems.filter((item) => item.price < 50);} else if (this.priceFilter === "50to100") {return this.cartItems.filter((item) => item.price >= 50 && item.price <= 100);} else if (this.priceFilter === "above100") {return this.cartItems.filter((item) => item.price > 100);} else {return this.cartItems;}},},methods: {// 移除商品removeItem(id) {this.cartItems = this.cartItems.filter((item) => item.id !== id);},// 清空购物车clearCart() {this.cartItems = [];},},
};
</script><style scoped>
h1,
h2 {color: #333;
}
button {margin-top: 10px;
}
</style>

效果展示

（本章节仅仅面向初步学习，页面简陋）

页面由下面代码决定

<template><div><h1>购物车</h1><div v-for="item in filteredItems" :key="item.id"><p>{{ item.name }} - {{ item.price }} 元</p><input type="number" v-model.number="item.quantity" min="1" /><button @click="removeItem(item.id)">移除</button></div><div><label>筛选价格(仅仅筛选单价)：<select v-model="priceFilter"><option value="all">全部</option><option value="under50">小于 50 元</option><option value="50to100">50 - 100 元</option><option value="above100">大于 100 元</option></select></label></div><h2>总价：{{ totalPrice }} 元</h2><button @click="clearCart">清空购物车</button></div>
</template>

其中用v-for循环进行页面打印表单。