用vue写一个简易的购物车可是实现数量的增减
时间: 2024-10-18 15:04:51 浏览: 20
在 Vue.js 中创建一个简单的购物车功能,你可以使用组件化的方式来管理商品和数量。首先,我们需要创建两个基本组件,一个是商品列表项(CartItem),另一个是购物车(ShoppingCart)。以下是简化的步骤:
1. **CartItem.vue**:
```html
<template>
<div class="cart-item">
<img :src="product.image" :alt="product.name"/>
<h3>{{ product.name }}</h3>
<p>价格: {{ product.price }}</p>
<button @click="decrement">-</button>
<span class="quantity">{{ quantity }}</span>
<button @click="increment">+</button>
</div>
</template>
<script>
export default {
props: {
product: { type: Object, required: true },
},
data() {
return {
quantity: 1,
};
},
methods: {
decrement() {
if (this.quantity > 0) {
this.quantity--;
}
},
increment() {
this.quantity++;
},
},
};
</script>
```
2. **ShoppingCart.vue**:
```html
<template>
<div class="shopping-cart">
<h2>购物车</h2>
<ul>
<li v-for="(item, index) in items" :key="index">
<CartItem :product="item" />
</li>
</ul>
<button @click="addItem">添加商品</button>
</div>
</template>
<script>
import CartItem from './CartItem.vue';
export default {
components: {
CartItem,
},
data() {
return {
items: [],
};
},
methods: {
addItem(product) {
this.items.push({ name: product.name, price: product.price });
},
},
};
</script>
```
这个例子中,`CartItem`组件接受商品信息作为prop,并提供增加(+)和减少(-)数量的功能。`ShoppingCart`组件显示商品列表并包含一个添加按钮。
阅读全文