doctype html>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>簡單購物車
title
>
head
>
<
style
>
*table
th,td
thstyle
>
<
body
>
<
div
id>
<
div
v-if
="car.length"
>
<
table
>
<
tr>
<
th>
th>
<
th>書籍名稱
th>
<
th>出版日期
th>
<
th>**
th>
<
th>購買數量
th>
<
th>操作
th>
tr>
<
tr v-for
="item,index in car"
>
<
td>}
td>
<
td>}
td>
<
td>}
td>
<
td>}
td>
<
td>
<
button
@click
="plus(index)"
>+
button
>
}
<
button
@click
="minus(index)"
:disabled
="item.count <=1"
>-
button
>
td>
<
td><
button
@click
="remove(index)"
>移除
button
>
td>
tr>
table
>
<
h2>總**：}
h2>
div>
<
h2 v-else
>購物車為空
h2>
div>
body
>
<
script
src="js/vue.js"
>
script
>
<
script
>
=new
vue(,,,
,]},methods: ,
//增加數量
plus(index),
//減少數量
minus(index),
//移除操作
remove(index)
},//
過濾器取小數點後兩位
filters:
},computed:
return
totalprice;
//方法二
//let totalprice = 0;
//for(let i in this.car)
//return totalprice;
//方法三
//let totalprice = 0;
//for(let i of this.car)
//return totalprice;
//方法四
//reduce 高階函式
其中因為設定的資料**為字串形式所以需要強制轉換為number形式，若直接設定number則不需要轉換。
具體資料要看從後台獲取的型別。
vue 簡單實現購物車案例
這個案例是對前面基礎知識的乙個整合，用到的知識點還是挺多的，比如 filters 以及屬性的動態繫結等。2020 6 17 修改 求總 時，換用高階函式reduce。書籍名稱 出版日期 購買數量 操作 移除 總 購物車為空 data methods decrement key remove key ...
Vue實戰 購物車案例
實現的功能 新增商品到購物車，計算總價 商品名稱 商品 商品數量 新增購物車 0 購物車 0 style font size 20px 購物車 購物車為空 總價 ps for迴圈的多種形式 上面我們使用for i in 陣列 物件 的形式，在js中for迴圈常用的形式有四種 方式一 i是索引,迴圈選...
購物車案例
寫錄入系統的介面 var express require express 引入mongoose var mongoose require mongoose mongoose.connect mongodb var con mongoose.connection 判斷是否連線成功 con.on ope...