您好,登錄后才能下訂單哦!
本文實(shí)例講述了Vue.js實(shí)現(xiàn)開(kāi)發(fā)購(gòu)物車(chē)功能的方法。分享給大家供大家參考,具體如下:
購(gòu)物車(chē)一般包含商品名稱(chēng)、單價(jià)、數(shù)量等信息,數(shù)量可以任意新增或減少,商品項(xiàng)也可刪除,還可以支持全選或多選:
我們把這個(gè)小項(xiàng)目分為三個(gè)文件:
1 index.js
首先在 js 中初始化 Vue 實(shí)例,整體模板如下:
var app = new Vue({ el: '#app', data: { ... }, mounted: function () { ... }, computed: { ... }, methods: { ... } });
一般來(lái)說(shuō),這里的 data 來(lái)源于服務(wù)端數(shù)據(jù),這里為了簡(jiǎn)便,所以直接定義好的數(shù)據(jù):
data: { /** * 購(gòu)物車(chē)中的商品列表 */ list: [ { id: 1, name: '韓國(guó)進(jìn)口海牌海苔', price: 39.9, count: 1 }, { id: 2, name: '印尼進(jìn)口 Nabati 麗巧克(Richoco)休閑零食 巧克力味 威化餅干', price: 11.8, count: 1 }, { id: 3, name: '菲律賓進(jìn)口 道吉草 奶油夾', price: 6.5, count: 1 } ], //選中的商品列表,用于計(jì)算總價(jià) checkList: [] }
list 用于展示 購(gòu)物車(chē)中的商品列表。
checkList 用于表示勾選中的商品列表,后面,我們會(huì)利用它來(lái)計(jì)算選中商品的總價(jià)。
mounted: function () { //默認(rèn)全選 this.checkAll(); this.checkAllElement(document.querySelector(".checkAll")); }
當(dāng) mounted 時(shí),默認(rèn)全選購(gòu)物車(chē)內(nèi)的所有商品。
computed: { /** * 總價(jià) * @returns {string} */ totalPrice: function () { var total = 0; for (var i = 0; i < this.checkList.length; i++) { var item = this.checkList[i]; total += item.price * item.count; } return total.toLocaleString(); } }
在計(jì)算屬性中,我們定義了總價(jià)的計(jì)算方式,它會(huì)綁定勾選的 checkList 來(lái)計(jì)算總價(jià)。之所以使用 toLocaleString 方法,是因?yàn)樾?shù)部分會(huì)自動(dòng)四舍五入,而且還會(huì)以千分位表示出來(lái),很方便哦O(∩_∩)O~
methods: { /** * 減少購(gòu)買(mǎi)數(shù)量 * @param index */ reduceCount: function (index) { if (this.list[index].count === 1) return; this.list[index].count--; }, /** * 增加購(gòu)買(mǎi)數(shù)量 * @param index */ addCount: function (index) { this.list[index].count++; }, /** * 移除商品 * @param index */ remove: function (index) { console.log("remove-index:" + index); this.list.splice(index, 1); //獲取商品序號(hào) var id = index + 1; //移除實(shí)際參與計(jì)算的商品 var $checkList = this.checkList; for (var i = 0; i < $checkList.length; i++) { var item = $checkList[i]; if (item.id == id) { $checkList.splice(i, 1); } } }, /** * 全選或全不選 * @param event */ checkAllOrNot: function (event) { if (event.target.checked) {//全選 this.checkAll(); console.log("checkList:" + this.checkList); } else { // 全不選 console.log("全不選"); this.checkInItems('noCheckAll'); this.checkList.splice(0);//清空數(shù)組 } }, /** * 全選 */ checkAll: function () { console.log("全選"); this.checkInItems('checkAll'); this.checkList = this.list.concat();//復(fù)制商品列表 }, /** * 全選或全不選 * @param type checkAll:全選;其他:全不選 */ checkInItems: function (type) { var items = document.querySelectorAll('.checkItem'); for (var i = 0; i < items.length; i++) { var item = items[i]; if (type === 'checkAll') { item.checked = true; } else { item.checked = false; } } }, /** * 勾選或不勾選 */ checkItem: function (event, index) { console.log("checkItem"); var element = event.target; var $allCheck = document.querySelector(".checkAll"); if (element.checked) {//勾選,加入已選擇列表 this.checkList.push(this.list[index]); this.checkAllElement($allCheck); } else {//不勾選,從已選擇列表中去除 this.checkList.splice(index, 1); $allCheck.checked = false; } }, /** * 勾選全選框 * @param element */ checkAllElement: function (element) { //如果所有的商品都已被勾選,則勾選全選框 if (this.checkList.length == this.list.length) { element.checked = true; } } }
在 methods 中,我們定義了以下功能方法:
減少與增加購(gòu)買(mǎi)數(shù)量。在減少購(gòu)買(mǎi)數(shù)量方法中,我們對(duì)當(dāng)前所對(duì)應(yīng)商品的數(shù)量進(jìn)行了二次確認(rèn),讓代碼變得更加健壯(HTML 模板可能被修改,button 被替換為 div 或者 span,那么 disabled 樣式就變得無(wú)效啦)。
移除某件商品。因?yàn)橘?gòu)物車(chē)中的商品列表與實(shí)際勾選的商品列表數(shù)量上有可能存在差異,所以我們必須通過(guò)找到商品 ID 再進(jìn)行刪除。
勾選相關(guān)操作(全選、全不選、單選、單不選等)
2 style.css
[v-cloak] { display: none; } table { border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; empty-cells: show; } th { font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; border-top: 1px solid #C1DAD7; letter-spacing: 2px; text-transform: uppercase; text-align: left; padding: 6px 6px 6px 12px; background: #CAE8EA; } td { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; background: #fff; font-size:14px; padding: 6px 6px 6px 12px; color: #4f6b72; }
這里定義了 v-cloak 樣式,用于解決網(wǎng)絡(luò)慢時(shí)的閃屏問(wèn)題。還定義了表格的相關(guān)樣式。
3 index.html
接著在 index.html 中引入 Vue 腳本與樣式文件。基本模板如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>購(gòu)物車(chē)</title> <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" > </head> <body> <div id="app" v-cloak> ... </div> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <script src="index.js"></script> </body> </html>
因?yàn)橛锌赡苜?gòu)物車(chē)中的商品被全部刪除,所以我們?cè)诖思恿伺袛啵绻斜頌榭?,則給出友好提示:
<template v-if="list.length"> ... </template> <!--當(dāng)購(gòu)物車(chē)為空時(shí),則提示--> <div v-else>購(gòu)物車(chē)內(nèi)暫時(shí)沒(méi)有商品</div>
接著用 table 來(lái)展示購(gòu)物車(chē)內(nèi)的商品列表:
<table> <thead> <tr> <th><input id="checkAll" type="checkbox" class="checkAll" @click="checkAllOrNot($event)"></th> <th>序號(hào)</th> <th>商品</th> <th>單價(jià)</th> <th>數(shù)量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item,index) in list"> <td><input type="checkbox" class="checkItem" @click="checkItem($event,index)"></td> <td>{{index+1}}</td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td> <button @click="reduceCount(index)" :disabled="item.count===1">-</button> {{item.count}} <button @click="addCount(index)">+</button> </td> <td> <button @click="remove(index)">刪除</button> </td> </tr> </tbody> </table> <div>總價(jià):¥{{totalPrice}}</div>
使用 v-for 指令,循環(huán)迭代出商品列表。
表格內(nèi)的每一個(gè)勾選框與按鈕都綁定了相應(yīng)的事件。全選框與每一行的勾選框還傳入了原生 DOM 事件 $event,用于獲取當(dāng)前所操作的元素。
*這里對(duì)減少商品數(shù)量的按鈕進(jìn)行了判斷,當(dāng)相應(yīng)商品的數(shù)量只剩下一個(gè)時(shí),綁定 disabled 樣式,讓它變成不可用。
4 演示
本文jsfiddle示例DEMO地址:https://jsfiddle.net/deniro/hvq1y72o/
希望本文所述對(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)容。