<template>
<div id="app">
<h1>购物车示例</h1>
<div v-for="(item, index) in cart" :key="index">
<span>{{ item.name }} - 单价: {{ item.price }} - 数量: {{ item.quantity }}</span>
<button @click="removeItem(index)">移除</button>
</div>
<h2>总计: {{ totalPrice }}</h2>
</div>
</template>
<script>
export default {
name: 'ShoppingCart',
data() {
return {
cart: [
{ name: '商品A', price: 100, quantity: 1 },
{ name: '商品B', price: 200, quantity: 2 },
{ name: '商品C', price: 300, quantity: 3 }
]
};
},
computed: {
totalPrice() {
return this.cart.reduce((total, item) => {
return total + (item.price * item.quantity);
}, 0);
}
},
methods: {
removeItem(index) {
this.cart.splice(index, 1);
}
}
};
</script>这个简单的Vue示例展示了如何创建一个购物车组件，其中包括一个商品列表、数量和移除按钮，以及计算总价的功能。通过v-for指令循环渲染商品，使用计算属性totalPrice计算总价，并提供了一个removeItem方法来移除商品。这个示例简单易懂，适合作为Vue入门教程的一部分。