剛剛接觸vue框架不久，vue用起來確實很方便，省去了許多重複的操作，但是一開始使用vue框架確實不習慣，因為vue主要是通過改變資料來進行操作，轉變思維方式很重要！
這是我第一次嘗試使用vue實現基本的購物車邏輯，主要包括新增、減少、單個商品刪除、已選商品刪除、單選、全選操作。如有錯誤，還請指正，萬分感謝！
樣圖：
h2>購物清單
h2>
5<
table
>
6<
tr>
7<
th>
8<
input
type
="checkbox"
@change
="checkedall($event)"
>9全選
10th
>
11<
th>商品
th>
12<
th>數量
th>
13<
th>單價（元）
th>
14<
th>金額（元）
th>
15<
th>操作
th>
16tr
>
1718
<
tr v-for
="(item, index) in goods"
>
19<
th>
20<
input
v-model
="item.issel"
type
="checkbox"
>
21th
>
22<
th class
="content"
>
23<
img
:src
="item.image"
width
="100px"
height
="100px"
>
24<
p>}
p>
25th
>
26<
th>
27<
button
type
="button"
@click
="decrease(index)"
>-
button
>
28<
span
>}
span
>
29<
button
type
="button"
@click
="add(index)"
>+
button
>
30th
>
31<
th>}
th>
32<
th>}
th>
33<
th>
34<
span
id="delete"
@click
="deletethis(index)"
>刪除
span
>
35th
>
36tr
>
3738
table
>
3940
<
div
class
="shoppingbar-footer"
>
41<
div
class
="manage"
>
42<
span
class
="delall"
@click
="deleteselected"
>刪除所選商品
span
>
43<
span
class
="return"
>繼續購物
span
>
44div
>
4546
<
button
id="go"
type
="button"
>去結算
button
>
4748
<
div
class
="buy"
>
49<
span
>}
span
>
50件商品總計:
51<
span
>￥}
span
>
52div
>
53div
>
54div
>
55div
>
js**：vue(, ,,],
},computed:
}return
sum;
},//計算所選商品總價
totalprice: function
() }
return
sum1;
},},
methods:
else
},//點選減號
add: function
(index) ,
//點選全選
checkedall: function
(e)
} else}},
//點選刪除單條商品列表
deletethis: function
(index) ,
//點選刪除所選商品列表
deleteselected: function
() }}}
});css**：
.shoppingbar .shoppingbar h2 .shoppingbar table .shoppingbar table tr:first-of-type .shoppingbar table tr th img .shoppingbar table tr th p .shoppingbar table tr .content .shoppingbar table tr #delete .shoppingbar .shoppingbar-footer .shoppingbar .shoppingbar-footer .manage .shoppingbar .shoppingbar-footer .manage .delall,.return .shoppingbar .shoppingbar-footer .buy .shoppingbar .shoppingbar-footer #go .shoppingbar .shoppingbar-footer .buy span
vue實現簡單的購物車
lang en dir ltr charset utf 8 購物車例項title rel stylesheet href style.css type text css head on cloak v if list.length 0 th 商品名稱th 商品 th 購買數量th 操作th tr t...
vue 簡單實現購物車案例
這個案例是對前面基礎知識的乙個整合，用到的知識點還是挺多的，比如 filters 以及屬性的動態繫結等。2020 6 17 修改 求總 時，換用高階函式reduce。書籍名稱 出版日期 購買數量 操作 移除 總 購物車為空 data methods decrement key remove key ...
簡單購物車實現
作業二 簡單購物車 實現列印商品詳細資訊，使用者輸入商品名和購買個數，則將商品名，購買個數加入購物列表，如果輸入為空或其他非法輸入則要求使用者重新輸入shopping list while true print 商品選項 msg dic for k,v in msg dic.items 033 44...