好的，我可以为您提供一个
简单的
Vue购物车示例代码。假设您已经有了商品列表和每个商品的价格，您需要
实现以下功能：
1. 点击“加入
购物车”按钮时，将商品添加到
购物车中。
2. 显示
购物车中的商品数量和总价格。
3. 可以从
购物车中删除商品。
下面是一个
简单的
Vue购物车示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
<script src="https://cdn.jsdelivr.net/npm/
vue/dist/
vue.js"></script>
</head>
<body>
<div id="app">
<h2>商品列表</h2>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.name }} - {{ item.price }}
<button @click="addToCart(index)">加入
购物车</button>
</li>
</ul>
<h2>
购物车</h2>
<p>数量：{{ cartItems.length }}</p>
<p>总价：{{ getTotalPrice() }}</p>
<ul>
<li v-for="(item, index) in cartItems" :key="index">
{{ item.name }} - {{ item.price }}
<button @click="removeFromCart(index)">删除</button>
</li>
</ul>
</div>
<script>
var app = new
Vue({
el: '#app',
data: {
items: [
{name: '商品1', price: 10},
{name: '商品2', price: 20},
{name: '商品3', price: 30},
{name: '商品4', price: 40},
{name: '商品5', price: 50},
],
cartItems: [],
},
methods: {
addToCart: function(index) {
this.cartItems.push(this.items[index]);
},
removeFromCart: function(index) {
this.cartItems.splice(index, 1);
},
getTotalPrice: function() {
var totalPrice = 0;
for (var i = 0; i < this.cartItems.length; i++) {
totalPrice += this.cartItems[i].price;
}
return totalPrice;
},
},
});
</script>
</body>
</html>
```
在这个示例中，我们首先声明了一个
Vue实例，并定义了两个数据属性：`items`和`cartItems`。`items`是商品列表，包含每个商品的名称和价格。`cartItems`是
购物车列表，包含当前加入
购物车的商品。
在`addToCart`方法中，我们将所选商品添加到
购物车列表中。在`removeFromCart`方法中，我们可以从
购物车中删除某个商品。在`getTotalPrice`方法中，我们计算
购物车中所有商品的总价格。
在HTML中，我们使用
Vue的指令`v-for`对商品列表和
购物车列表进行循环，并使用`v-bind`将商品的名称和价格绑定到HTML元素上。我们还使用`v-on`指令将点击事件绑定到“加入
购物车”按钮和“删除”按钮上，以便在单击按钮时触发相应的方法。最后，我们使用
Vue的双向数据绑定将
购物车中商品数量和总价绑定到HTML元素上，以便实时更新。
这是一个非常基本的
Vue购物车示例，您可以根据自己的需求进行修改和扩展。
779
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
