使用Vue實現購物車功能


要實現的效果如圖下

遍歷循環data中購物車的數據渲染到頁面上,產品的所有字段,購買的數量,以及單價

先遍歷直接能用的數據:

接着對購物車產品數量表單進行雙向數據綁定,給左右按鈕加一個點擊事件使用三元表達式判斷當前產品數量進行累加或者遞減

通過單價*數量綁定總金額:

接下來給產品列表,每一項添加一個select字段,判斷當前產品是否被選中,默認應該都是選中的:

接下來在計算屬性中添加一個獲取訂單總金額的方法:

接下來單選按鈕添加點擊事件,對是否選中進行取反操作,並給選中按鈕的綁定樣式:

看一眼效果基本實現了

 接下來實現全選的按鈕:

添加一個產品選擇方法

綁定到全選按鈕的點擊事件並把是否全選作為參數傳遞進去

到這里全選按鈕也完工了

接下來刪除單條產品,通過索引可以獲取到當前的條目:

在methods里定義刪除單條方法:

綁定點擊事件

在method添加一個刪除選中的事件

 

 到這里項目就完工了

http://delisteam.gitee.io/vuegouwuchelianxi/

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM