用vue.js语言实现一个完整的购物车项目
时间: 2024-06-09 22:06:50 浏览: 15
好的,下面是一个简单的购物车项目的实现,使用Vue.js框架和Bootstrap样式库。
首先,需要创建一个Vue实例,并定义一个数组来存储商品信息:
```html
<div id="app">
<div class="container">
<h1>购物车</h1>
<div class="row">
<div class="col-md-8">
<table class="table">
<thead>
<tr>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in cartItems" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>
<button class="btn btn-primary btn-sm" @click="decreaseQuantity(item)">-</button>
{{ item.quantity }}
<button class="btn btn-primary btn-sm" @click="increaseQuantity(item)">+</button>
</td>
<td>{{ item.price * item.quantity }}</td>
<td><button class="btn btn-danger btn-sm" @click="removeItem(item)">删除</button></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<h3>总计:{{ total }}</h3>
<button class="btn btn-success" @click="checkout">结算</button>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
cartItems: [
{ name: '商品1', price: 10, quantity: 1 },
{ name: '商品2', price: 20, quantity: 2 },
{ name: '商品3', price: 30, quantity: 3 }
]
},
computed: {
total: function() {
var sum = 0;
for (var i = 0; i < this.cartItems.length; i++) {
sum += this.cartItems[i].price * this.cartItems[i].quantity;
}
return sum;
}
},
methods: {
increaseQuantity: function(item) {
item.quantity++;
},
decreaseQuantity: function(item) {
item.quantity--;
if (item.quantity < 1) {
this.removeItem(item);
}
},
removeItem: function(item) {
var index = this.cartItems.indexOf(item);
if (index > -1) {
this.cartItems.splice(index, 1);
}
},
checkout: function() {
alert('结算成功,共计' + this.total + '元');
this.cartItems = [];
}
}
});
</script>
```
在Vue实例中,我们定义了一个`cartItems`数组,其中包含三个商品的信息,包括商品名称、单价和数量。在模板中,我们使用`v-for`指令来循环遍历数组,并将每个商品的信息显示在表格中。同时,我们还定义了`increaseQuantity`、`decreaseQuantity`和`removeItem`方法来增加、减少和删除商品数量,并计算总价。最后,我们定义了一个`checkout`方法来结算购物车并清空购物车数组。
这样就完成了一个简单的购物车项目的实现,你可以根据自己的需求来扩展和定制它。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)