生活随笔
收集整理的這篇文章主要介紹了
Vue实现购物车功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
數據：以對象的形式存儲，對象的成員有商品名稱，商品單價，商品購買數量(至少為1)。
一個變量來記錄商品總價格
方法:1表格單中提供一個刪除鍵，點擊后執行HTML語句，對被點擊元素的所在行進行HTML內容的清空。同時，商品的總價應發生變化。
2表格當中實現實現增加按鈕和減少按鈕各一個實現改變商品數量的功能。同時挑選出所有的標簽元素，選擇為偶數的元素，為其添加判斷該條件，當該行所在的商品數量為1時，減按鈕失效。
3要對表格進行填充
方法預想實現
1為其設置點擊事件，傳遞出發事件的的對象($(event))，然后對該元素的HTML內容進行清空。
2使用JS方法獲取所有的button元素，為其綁定點擊事件，然后其中為偶數的的button添加判斷條件，當其綁定的商品數量為1時，按鈕的disable屬性為true，每次點擊的時候就觸發一次，僅作用于當前按鈕。
點擊之后商品的數量和總價都應該發生改變。
3對表格的填充使用v-for進行遍歷即可。
4給表格的每行添加id元素，值就是對應的行書就，然后再給button綁定元素監聽事件。
方法真正實現
1為其設置點擊事件，傳遞當前事件綁定元素，尋找其父類元素，移除父類元素，或者給父類元素添加隱藏具有隱藏效果的類名
2不需要獲取所有的button元素并為偶數的添加判斷條件，只需要將其判斷傳遞的參數是否為"-"符號，以及button所在行的數量是否為1即可。點擊之后都要進行一次商品總價計算。
3使用v-for對表格進行填充，同時使用step函數給每個行賦予id值，而不是直接使用變量.index的形式，這樣會被認為是字符串而不是被當作變量解析。
4給button元素綁定監聽事件直接放在html內容中，使用@click進行綁定。
總結：獲取點擊元素的父元素（要傳入事件參數對象）的id：e.target.parentElement.id
思路：利用for循環自動填充表格內容，給行添加id值。利用按鈕被點擊尋找其父類，獲取id值，然后根據按鈕的類別和當前商品數量是否為1來進行操作。刪除則是隱藏當前元素，也可以真正使用remove移除。
但這回造成表格已有行的混亂。但是只要根據id值來判斷刪除而不是使用下標也是可以的。
<!DOCTYPE html
>
<html><head><meta charset
="utf-8"><title>購物車
</title
><link rel
="stylesheet" href
="../Boostrap/css/bootstrap-theme.css" /><style type
="text/css">[v
-cloak
]{display
: none
;}table
{width
: auto
;height
: 300px
;text
-align
: center
;}thead
{background
-color
: paleturquoise
;font
-weight
: 100;font
-size
: medium
;}<button>{font
-size
: medium
;box
-sizing
: border
-box
;}.but1
{width
: 20px
;}.hide
{display
: none
;}td
{padding
: 10px
;width
: 250px
;height
: 100px
;border
: 1px solid cadetblue
;}</style
><script src
="../Vue/vue.js" type
="text/javascript" charset
="UTF-8"></script
><script src
="../jquery/jquery-3.6.0.min.js" type
="text/javascript"></script
></head
><body><div id
="app" v
-cloak
><table><thead><tr><td>第幾行
</td
><td>商品名稱
</td
><td>商品單價
</td
><td>購買數量
</td
><td>操作
</td
></tr
></thead
><tbody><tr v
-for="(item,index) in commoding" :id
="step(index)"><td>{{item
.index
+ 1}}</td
><td>{{item
.name
}}</td
><td>{{item
.price
}}</td
><td><button
@click="getclick($event,'-')" class="but1" id
="item.index">-</button
>{{item
.num
}}<button
@click="getclick($event,'+')" class="but1" id
="item.index + 1">+</button
></td
><td
@click="delete1(item.index)">刪除
</td
></tr
></tbody
></table
><li>總價：
{{sum_price
}}</li
></div
><script type
="text/javascript">var vm
= new Vue({el
:'#app',data
:{commoding
:[{name
:'Apple',price
:10,num
:1,index
:0},{name
:'Orange',price
:5,num
:1,index
:1},{name
:'banner',price
:20,num
:1,index
:2},],sum_price
:0,delete_num
:0,},methods
:{delete1
:function(row
){var pj
= document
.querySelectorAll('tr');pj
[row
+1].className
= 'hide';this.commoding
[row
].num
= 0;this.sum();},getclick
:function(e
,str
){var get_row
= e
.target
.parentElement
.parentElement
.id
;if(str
== '-' && this.commoding
[get_row
].num
!= 1){this.commoding
[get_row
].num
--;}else if(str
!= '-'){this.commoding
[get_row
].num
++;}this.sum();},step
:function(bjk
){return bjk
;},sum
:function(){this.sum_price
= this.commoding
[0].num
*this.commoding
[0].price
+this.commoding
[1].num
*this.commoding
[1].price
+this.commoding
[2].num
*this.commoding
[2].price
;console
.log(sum_price
);}}});</script
></body
>
</html
>
效果如圖
總結
以上是生活随笔為你收集整理的Vue实现购物车功能的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
