<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
購物車<
/title>
* #table
#table th
#table td
<
/style>
<
/head>
"table"
>
全選 "checkbox"
:style=
"xua" v-model=
'qx' @change=
'qa()'
>
<
/th>
商品名稱<
/th>
數量<
/th>
單價<
/th>
小記<
/th>
操作<
/th>
<
/tr>
<
/thead>
for=
"(shang,index) in shangs"
>
"checkbox"
:style=
"xua" v-model=
'shang.m' @change=
'danxuan()'
>
<
/td>
}<
/td>
"xua" @click=
'jian(index)'
>
-<
/button>
"shu"
>
}<
/span>
"xua" @click=
'add(index)'
>
+<
/button>
<
/td>
單價：¥ "danjia"
>
}<
/span>
<
/td>
小記：¥ "xiaoji"
>
}<
/span>
<
/td>
操作："dele" id=
'shan' @click=
'shan(index)'
>刪除<
/button>
<
/td>
<
/tr>
"6">商品一共共計
}<
/span>件，共計花費¥
}<
/span>元<
/td>
<
/tr>
<
/tbody>
<
/table>
"./js/vue.js"
>
<
/script>
let vue =
newvue(,
,,,]
,}, methods:
,// 減號事件
jian
(index)
this
.shangs[index]
.shuliang--
this
.shangs[index]
.xiaoji =
this
.shangs[index]
.shuliang *
this
.shangs[index]
.danjian
},// 全選事件qa(
)},// 單選事件
danxuan()
}this
.qx = a
},// 總件數
zongjian()
}return zongj
},// 總價
zongqian()
}return money
},// 刪除
shan
(index)}}
)<
/script>
<
/body>
<
/html>
Vue購物車例項
這是效果圖 看起來很簡單是不是 之前一直寫jquery 總是想著 dom 操作 思維感覺沒有切換過來 想了很久,最後使用vue的屬性進行控制,實現了多選計算屬性的功能 直接上原始碼 編號商品名稱 商品單價 購買數量 操作 移除 總價 購物車為空 這個路徑要修改,就不多說了 data isallche...
Vue購物車實戰
最近學習在學由梁灝著作的vue.js實戰，其中有一章講述如何用vue開發購物車的章節，即課後練習，以下書中的開發過程即本人的課後練習，希望能對你學習vue有所幫助。通過增加或減少商品的數量來控制商品總價 v cloak table thth,td練習一 在當前示例基礎上擴充套件商品列表，新增一項是否...
Vue購物車例項
這是效果圖 看起來很簡單是不是 之前一直寫jquery 總是想著 dom 操作 思維感覺沒有切換過來 想了很久,最後使用vue的屬性進行控制,實現了多選計算屬性的功能 直接上原始碼 編號商品名稱 商品單價 購買數量 操作 移除總價 購物車為空 這個路徑要修改,就不多說了 data isallchec...