本文實例講述了Vue.js實現的購物車功能。分享給大家供大家參考，具體如下：
使用計算屬性，內置指令，方法等基礎知識開發購物車。
需求分析：展示一個已經加入購物車的商品列表，包含商品名稱、商品單價、購買數量和操作，以及最后確定是否選中商品的功能，總價格為選中商品的價格，夠買數量可以增加減少，商品可以從購物車中移除。效果如圖所示：
――實例來自《Vue.js實戰》第五章
邏輯整理：vue實例定義一個數組list存放商品信息，定義方法與減少按鈕，增加按鈕等聯系，動態改變商品數量，通過handleRemove()移除list中的值；利用each()遍歷所有type='checkbox'的input，修改它們的狀態，最后用totalPrices()計算商品總價格。
index.html
<div id="app"> <template v-if="list.length"> <table> <thead> <tr> <th></th> <th>商品名稱</th> <th>商品單價</th> <th>購買數量</th> <th>操作</th> <th><input type="checkbox" name="list" @click="checkBox()" id="checkBox"></th> </tr> </thead> <tbody> <tr v-for="(item, index) in list"> <td>{{ index + 1 }}</td> <td>{{ item.name }}</td> <td>{{ item.price }}</td> <td> <button @click="handleReduce(index)" :disabled="item.count === 1" class="btn"> - </button> {{ item.count }} <button @click="handleAdd(index)" class="btn"> + </button> </td> <td> <button @click="handleRemove(index)" class="btns">移除</button> </td> <td style="text-align: center;"> <input type="checkbox" name="list" @click="totalPrices()"> </td> </tr> </tbody> </table> <div id="price">總價：￥{{totalPrice}}</div> </template> <div v-else>購物車為空</div></div>style.css
*{ margin: 0px; padding: 0px;}[v-cloak] { display: none;}#app{ width: 200px; height: 200px; margin: 10px auto; text-align: center;}#price{ width: 457px; height: 40px; border: 1px solid #e9e9e9; border-top: 0; line-height: 40px;}table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; empty-cells: show;}th,td{ padding: 8px 16px; border:1px solid #e9e9e9e9; text-align: left;}th{ background: #f7f7f7; color: #5c6c77; font-weight: 600; white-space: nowrap;}.btn{ width: 20px; height: 20px; border-radius: 50%; border:1px solid #cccccc; background: #ffffff; color: #778899;}.btns{ width: 40px; height: 20px; border-radius: 5px; border:1px solid #cccccc; background: #ffffff; color: #778899; line-height: 20px;}app.js
var app=new Vue({ el:'#app', data:{ list: [ { id:1, name:'iPhone 7', price:6188, count:1 }, { id:2, name:'iPad Pro', price:5888, count:1 }, { id:3, name:'MaxBook Pro', price:21488, count:1 } ], totalPrice: 0 }, methods:{ handleReduce: function (index) {//減少按鈕 if(this.list[index].count === 1){ return; } this.list[index].count--; this.$options.methods.totalPrices(); }, handleAdd: function (index) {//增加按鈕 this.list[index].count++; this.$options.methods.totalPrices(); }, handleRemove: function (index) {//移除按鈕 this.list.splice(index, 1); $("tr").eq(index+1).remove("input[type='checkbox']"); this.$options.methods.totalPrices(); }, checkBox: function (){//選中狀態 if($("#checkBox").is(':checked')==true){ $("input[type='checkbox']").each(function(){ $("input[type='checkbox']").attr("checked",true); }); }else{ $("input[type='checkbox']").each(function(){ $("input[type='checkbox']").attr("checked",false); }); } this.$options.methods.totalPrices(); }, totalPrices: function (){//計算總價格 var total = 0; for(var i = 0;i < app.list.length;i++){ var item = app.list[i]; if($("input[type='checkbox']").eq(i+1).is(':checked')){ total += item.price * item.count; } } app.totalPrice = total.toString().replace(//B(?=(/d{3})+$)/g,','); } }});GitHub地址：https://github.com/GitHubVikas/Yao/tree/master/DemoOne
希望本文所述對大家vue.js程序設計有所幫助。
新聞熱點
疑難解答
