实现购物车功能，可以按以下步骤进行：
1. 创建一个包含商品信息的数组，其中每个商品对象包含id、名称、价格、
数量等属性。
2. 在
Vue中
使用v-for指令遍历数组中的商品对象，并
使用flex布局将商品横向排列。
3. 在购物车页面，可以
使用computed属性计算出购物车中所有商品的总价和总
数量。
4. 在每个商品对象中添加一个购物车状态的属性，例如isInCart，初始为false。点击加入购物车
按钮时，将该属性设置为true，并将商品对象添加到购物车数组中；点击移出购物车
按钮时，将该属性设置为false，并从购物车数组中移除该商品对象。
5. 在v-for指令中添加一个v-if条件，判断商品的
数量是否为0，若为0则不显示该商品。
下面是一个示例代码：
HTML:
```html
<div id="app">
<div class="product-list">
<div v-for="product in productList" :key="product.id" class="product-card">
<img :src="product.image" alt="">
<div class="info">
<h3>{{ product.name }}</h3>
<p>{{ product.description }}</p>
<div class="price">{{ product.price }}</div>
<div class="quantity">
<button @click="decreaseQuantity(product)">-</button>
<span>{{ product.quantity }}</span>
<button @click="increaseQuantity(product)">+</button>
</div>
<button @click="addToCart(product)" v-if="!product.isInCart">加入购物车</button>
<button @click="removeFromCart(product)" v-else>移出购物车</button>
</div>
</div>
</div>
<div class="cart">
<h2>购物车</h2>
<div v-for="product in cart" :key="product.id" class="cart-item">
<div class="cart-info">
<h3>{{ product.name }}</h3>
<div class="cart-price">{{ product.price }}</div>
<div class="cart-quantity">{{ product.quantity }}</div>
</div>
</div>
<div class="cart-total">
<div>总价: {{ totalPrice }}</div>
<div>总
数量: {{ totalQuantity }}</div>
</div>
</div>
</div>
```
CSS:
```css
.product-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.product-card {
width: 300px;
margin-bottom: 20px;
border: 1px solid #ddd;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.product-card img {
width: 100%;
}
.info {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.price {
font-size: 24px;
font-weight: bold;
}
.quantity {
display: flex;
align-items: center;
}
.cart {
margin-top: 50px;
}
.cart-item {
display: flex;
align-items: center;
margin-bottom: 20px;
border: 1px solid #ddd;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.cart-info {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.cart-price {
font-size: 24px;
font-weight: bold;
}
.cart-quantity {
font-size: 18px;
font-weight: bold;
}
```
JS:
```js
new
Vue({
el: '#app',
data: {
productList: [
{
id: 1,
name: '商品1',
description: '这是商品1的描述',
price: 100,
image: 'https://via.placeholder.com/300x200',
quantity: 0,
isInCart: false,
},
{
id: 2,
name: '商品2',
description: '这是商品2的描述',
price: 200,
image: 'https://via.placeholder.com/300x200',
quantity: 0,
isInCart: false,
},
{
id: 3,
name: '商品3',
description: '这是商品3的描述',
price: 300,
image: 'https://via.placeholder.com/300x200',
quantity: 0,
isInCart: false,
},
],
cart: [],
},
computed: {
totalPrice() {
return this.cart.reduce((total, product) => total + product.price * product.quantity, 0);
},
totalQuantity() {
return this.cart.reduce((total, product) => total + product.quantity, 0);
},
},
methods: {
increaseQuantity(product) {
product.quantity += 1;
},
decreaseQuantity(product) {
if (product.quantity > 0) {
product.quantity -= 1;
}
},
addToCart(product) {
product.isInCart = true;
this.cart.push(product);
},
removeFromCart(product) {
product.isInCart = false;
const index = this.cart.indexOf(product);
this.cart.splice(index, 1);
},
},
});
```
在这个示例中，我们
使用了一个productList数组来存储所有的商品信息，
使用v-for指令遍历数组中的商品对象，并
使用flex布局将商品横向排列。每个商品对象都有一个quantity属性来记录该商品的
数量，以及一个isInCart属性来记录该商品是否在购物车中。点击加入购物车
按钮时，将该商品的isInCart属性设置为true，并将该商品对象添加到cart数组中；点击移出购物车
按钮时，将该商品的isInCart属性设置为false，并从cart数组中移除该商品对象。在v-for指令中添加一个v-if条件，判断商品的
数量是否为0，若为0则不显示该商品。在购物车页面中，
使用computed属性计算出购物车中所有商品的总价和总
数量，并显示在页面中。
扫一扫
501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
