Html|Vue实战小项目-购物车
在很多电商网站中，都有一个非常重要的功能，那就是购物车。接下来将使用Vue.js实现一个简易的购物车项目。实现的功能有全选或选择部分商品、计算总价、对商品数量进行增减、删除已添加至购物车的商品。
步骤
首先新建一个html文件，进行引入Vue.js与html代码编写，效果图如上。
一、单个商品的价格计算
单个商品数量可以增减，但最少数量为1，而且数量的变化也会引起价格的变化。数量的变化通过点击+或-去调用add或reduce方法，+的时候数量加1，-的时候数量减1，并且在单个商品金额的地方调用计算单个商品总结的方法。
reduce: function (index) { //减少商品
this.list[index].count --;
},
add: function (index) { //增加商品
this.list[index].count ++;
},
ofPrice: function (index) { //计算单个商品总价
let ofPrice = 0;
ofPrice+=(this.list[index].price*this.list[index].count);
return ofPrice.toString();
}二、选择商品
在购物车里，可以选择想要结算的商品进行最后价格结算，商品总金额为已选择的商品的金额之和。需要绑定单选按钮的选中状态，选中为true，再次点击状态取反。
<td> // 单选商品 <input type="checkbox" :checked="item.check" @click="item.check = !item.check"> </td> <th>全选<input id="all" @click="selAll" type="checkbox" checked></th> |
|---|
selAll: function () { //商品全选 let isAll = document.querySelector('#all'); if (isAll.checked == true) { this.list.forEach(function(item, index) { item.check = true; }) } else { this.list.forEach(function(item, index) { item.check = false; }) } }, |
上面是商品的选择，还需要计算已选择商品的价格之和。
totalPrices: function () { //计算总价 let totalPrices = 0; this.list.forEach(function (val, index) { if (val.check == true) //遍历商品，如果选中就进行计算。 totalPrices += parseFloat(val.price * val.count); }) return totalPrices.toString(); }, |
|---|
三、删除商品
点击每个商品后的移除后就会将该商品从商品列表中删除
remove: function (index) { //移除商品 this.list.splice(index, 1); }, |
|---|
四、完整代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app" v-cloak> <template v-if="list.length"> <table> <thead> <tr> <th>全选<input id="all" @click="selAll" type="checkbox" checked></th> <th>商品名称</th> <th>商品单价</th> <th>购买数量</th> <th>金额（元）</th> <th>操作</th> </tr> </thead> <tbody> <template v-for="(item, index) in list"> <tr> <td> <input type="checkbox" :checked="item.check" @click="item.check = !item.check"> </td> <td> {{ item.name }} </td> <td> {{ item.price }} </td> <td> <button @click="reduce(index)" :disabled="item.count == 1">-</button> {{ item.count }} <button @click="add(index)">+</button> </td> <td> {{ ofPrice(index) }} </td> <td> <button @click="remove(index)">移除</button> </td> </tr> </template> </tbody> </table> <div>总价: ￥ {{ totalPrices }}</div> </template> <template v-else> 购物车没有商品 </template> </div> <script src="../js/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { list: [ { id: 1, name: '矿泉水', price: 2, count: 1, check: true, }, { id: 2, name: '口香糖', price: 2.5, count: 1, check: false, }, { id: 3, name: '可乐', price: 3, count: 1, check: true, }, ] }, methods: { remove: function (index) { //移除商品 this.list.splice(index, 1); }, reduce: function (index) { //减少商品 this.list[index].count --; }, add: function (index) { //增加商品 this.list[index].count ++; }, selAll: function () { //商品全选 let isAll = document.querySelector('#all'); if (isAll.checked == true) { this.list.forEach(function(item, index) { item.check = true; }) } else { this.list.forEach(function(item, index) { item.check = false; }) } }, ofPrice: function (index) { //计算单个商品总价 let ofPrice = 0; ofPrice += (this.list[index].price * this.list[index].count); return ofPrice.toString(); } }, computed: { totalPrices: function () { //计算总价 let totalPrices = 0; this.list.forEach(function (val, index) { if (val.check == true) totalPrices += parseFloat(val.price * val.count); }) return totalPrices.toString(); }, } }) </script> </body> </html> |
|---|
END
主 编 | 王文星
责 编 | 刘玉江