最近學習在學由梁灝著作的vue.js實戰,其中有一章講述如何用vue開發購物車的章節,即課後練習,以下書中的開發過程即本人的課後練習,希望能對你學習vue有所幫助。
通過增加或減少商品的數量來控制商品總價
[v-cloak]
table
thth,td
練習一:在當前示例基礎上擴充套件商品列表,新增一項是否選中功能,總價變為只計算當前選中商品的**,同時提供乙個全選的按鈕。
商品名稱
商品單價
購買數量
操作
}}-}+移除
總價¥}
購物車為空
var datalist = [, ,]
var vm = new vue(,
computed:
}return total.tostring().replace(/\b(?=(\d)+$)/g, ',');}},
}, methods: ,
handleadd: function(index) ,
handlerremove: function(index) ,
handleselect: function(index) else );
if (typeof checklist=="undefined") }},
handleselectall: function()
this.checkall = checkall;
}}})
練習二:將商品列表list改為乙個二維陣列來實現商品的分類,比如可分為「電子產品」,「生活用品」,「果蔬」,同類產品聚合在一起。提示你可能會用到二次v-for
全選 商品名稱
商品單價
購買數量
操作
}
}}-}+移除
}購物車為空
var datalist = [
[ "電子產品",
[, , ]
], [
"生活用品",
[, , ]
], [
"果蔬",
[, , ] ]]
var vm = new vue(,
methods: ,
handlereduce: function(index, index2) ,
handlerremove: function(index, index2)
},handlerselect: function(index, index2) else )
});if (typeof checklist == "undefined") }},
handleselectall: function()
}this.checkall = checkall;
} },
computed: }}
return total.tofixed(2).tostring().replace(/\b(?=(\d)+$)/g, ',');;
} }})
Vue實戰 購物車案例
實現的功能 新增商品到購物車,計算總價 商品名稱 商品 商品數量 新增購物車 0 購物車 0 style font size 20px 購物車 購物車為空 總價 ps for迴圈的多種形式 上面我們使用for i in 陣列 物件 的形式,在js中for迴圈常用的形式有四種 方式一 i是索引,迴圈選...
Vue購物車例項
這是效果圖 看起來很簡單是不是 之前一直寫jquery 總是想著 dom 操作 思維感覺沒有切換過來 想了很久,最後使用vue的屬性進行控制,實現了多選計算屬性的功能 直接上原始碼 編號商品名稱 商品單價 購買數量 操作 移除 總價 購物車為空 這個路徑要修改,就不多說了 data isallche...
購物車 (vue做法)
doctype html en utf 8 viewport content width device width,initial scale 1.0 購物車 title table table th table td style head table 全選 checkbox style xua v...