vue實現(xiàn)購物車的監(jiān)聽
更新時間：2020年04月20日 09:50:22 作者：loving-cat
這篇文章主要為大家詳細介紹了利用vue的監(jiān)聽事件實現(xiàn)一個簡單購物車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
利用vue簡單實現(xiàn)購物車的監(jiān)聽，供大家參考，具體內(nèi)容如下
主要運用的vue的監(jiān)聽，有興趣的可以看看實現(xiàn)過程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用vue實現(xiàn)對購物車的監(jiān)聽</title>
<script src="../vue.js"></script>
<style type="text/css">
table{
border: 1px solid black;
width: 100%;
text-align: center;
}
th{
height: 50px;
}
th, td{
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="app">
<h1>訂單系統(tǒng)</h1>
<table>
<tr>
<th>編號</th>
<th>名稱</th>
<th>品牌</th>
<th>價格</th>
<th>數(shù)量</th>
<th>操作</th>
</tr>
<tr v-for="val in items">
<td>{{val.id}}</td>
<td>{{val.name}}</td>
<td>{{val.pinpai}}</td>
<td>{{val.price}}</td>
<td>
<!-- 如果count等于0執(zhí)行v-bind
綁定一個點擊事件 -->
<button v-bind:disabled="val.count === 0" @click="val.count-=1">-</button>
{{val.count}}
<button @click="val.count+=1">+</button>
</td>
<td>
<button v-on:click="val.count = 0">移除</button>
</td>
</tr>
</table>
<!-- 調(diào)用totalPrice -->
你所需要支付總額為：${{totalPrice()}}
</div>
<script type="text/javascript" charset="UTF-8">
var vm = new Vue({
el:"#app",
data:{
items:[{
id:1,
name:'上衣',
pinpai:'阿迪達斯',
price:100,
count:1
},
{
id:2,
name:'褲子',
pinpai:'安踏',
price:528,
count:1
},
{
id:3,
name:'鞋子',
pinpai:'耐克',
price:999,
count:1
}]
},
methods:{
totalPrice:function(){
var totalPri = 0;
//總價等于數(shù)量乘以數(shù)量
for(var i=0;i<this.items.length;i++){
totalPri += this.items[i].price*this.items[i].count;
}
return totalPri;
}
}
});
</script>
</body>
</html>
實現(xiàn)效果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue指令中的v-once用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇
這篇文章主要介紹了詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vue.extend和VueComponent的關(guān)系源碼解析
這篇文章主要為大家詳解了Vue.extend和VueComponent的關(guān)系源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了vuex實現(xiàn)歷史記錄的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)動態(tài)面包屑導(dǎo)航的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了解決vue單頁面 回退頁面 keeplive 緩存問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
小編這次要給大家分享的是如何實現(xiàn)vue2.x數(shù)組劫持，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲2023-01-01
解決vue-cli項目webpack打包后iconfont文件路徑的問題
今天小編就為大家分享一篇解決vue-cli項目webpack打包后iconfont文件路徑的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了在Vue2和Vue3中如何使用watch偵聽器，分別對vue2及vue3作了詳細的說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09
Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié)
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié),本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11