乞丐版vue购物车
乞丐版vue購物車
這是一個在學習vue框架的時候用來練手的的vue乞丐版購物車，實現的功能有全選、商品總數統計、價格計算、商品單個刪除和全選刪除，雖然界面很簡陋但是五臟俱。全分享給大家
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>購物車</title><style>table {width: 45%;border: 1px solid black;border-collapse: collapse;text-align: left;}table,th,td {border: 1px solid black;}</style> </head> <body><div id="app"><h1>購物車</h1><table><tr><th>全選<input type="checkbox" @click="selectProduct(isSelectAll)" :checked="isSelectAll" ></th><th>名稱</th><th>單價</th><th>數量</th><th>總價</th><th>操作</th></tr><tr v-for="(item,index) in productList" :key="index"><td><input type="checkbox" :checked="item.isSelect" :key="index" @click="item.isSelect=!item.isSelect"></td><td>{{item.proName}}</td><td>{{item.proPrice}}</td><td><button @click="item.proNum>0?item.proNum--:''">-</button>{{item.proNum}}<button @click="item.proNum++">+</button></td><td>{{item.proPrice*item.proNum}}</td><td><button @click="deletePro(index)">刪除</button></td></tr><td colspan="5">{{getTotal.totalNum}}件商品總計：￥{{getTotal.totalPrice}}</td><td><button @click="deleteProduct">刪除所選產品</button></td></tr></table></div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>new Vue({el: "#app", //掛載點data: {productList: [{'proName': '諸葛亮','proNum': 1,'proPrice': 100,},{'proName': '妲己','proNum': 1,'proPrice': 100,},{'proName': '程咬金','proNum': 1,'proPrice': 100,},{'proName': '魯班','proNum': 1,'proPrice': 100,}],},methods: {selectProduct: function (_isSelect) {let len = this.productList.length;//遍歷productList，全部取反for (var i = 0;i<len;i++) {this.productList[i].isSelect = !_isSelect;}},// 刪除deletePro: function (index) {alert("你正在刪除" + this.productList[index].proName);this.productList.splice(index, 1);},//刪除已經選中(isSelect=true)的產品deleteProduct: function(){// 檢查數組中符合條件的所有元素this.productList = this.productList.filter(function(item){return !item.isSelect})},},computed: {//檢測是否全選isSelectAll:function(){//如果productList中每一條數據的isSelect都為true，返回true，否則返回false;return this.productList.every(function(val){return val.isSelect;})},getTotal:function(){var prolist = this.productList.filter(function(val){return val.isSelect})totalPri = 0;for (var i = 0, len = prolist.length; i < len; i++) {totalPri += prolist[i].proPrice * prolist[i].proNum;}return {totalNum: prolist.length,totalPrice: totalPri}}},mounted: function () {var _this = this;//為productList添加select（是否選中）字段，初始值為truethis.productList.map(function (item) {_this.$set(item, 'isSelect', true);})}}) </script></html>總結
- 上一篇： java 数组定义是必须指定长度吗
- 下一篇： 浏览器内核（引擎）及css前缀