您好,登錄后才能下訂單哦!
本文實(shí)例講述了Vue.js實(shí)現(xiàn)的購(gòu)物車功能。分享給大家供大家參考,具體如下:
使用計(jì)算屬性,內(nèi)置指令,方法等基礎(chǔ)知識(shí)開(kāi)發(fā)購(gòu)物車。
需求分析:展示一個(gè)已經(jīng)加入購(gòu)物車的商品列表,包含商品名稱、商品單價(jià)、購(gòu)買數(shù)量和操作,以及最后確定是否選中商品的功能,總價(jià)格為選中商品的價(jià)格,夠買數(shù)量可以增加減少,商品可以從購(gòu)物車中移除。效果如圖所示:
——實(shí)例來(lái)自《Vue.js實(shí)戰(zhàn)》第五章
邏輯整理:vue實(shí)例定義一個(gè)數(shù)組list存放商品信息,定義方法與減少按鈕,增加按鈕等聯(lián)系,動(dòng)態(tài)改變商品數(shù)量,通過(guò)handleRemove()
移除list中的值;利用each()
遍歷所有type='checkbox'
的input,修改它們的狀態(tài),最后用totalPrices()
計(jì)算商品總價(jià)格。
index.html
<div id="app"> <template v-if="list.length"> <table> <thead> <tr> <th></th> <th>商品名稱</th> <th>商品單價(jià)</th> <th>購(gòu)買數(shù)量</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 > <input type="checkbox" name="list" @click="totalPrices()"> </td> </tr> </tbody> </table> <div id="price">總價(jià):¥{{totalPrice}}</div> </template> <div v-else>購(gòu)物車為空</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 (){//選中狀態(tài) 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 (){//計(jì)算總價(jià)格 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
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。