一個超簡單的vue商品計算總金額
哈哈哈，花了十幾分鐘寫的一個vue商品總價計算，雖然很簡單的。沒有寫樣式。
現在寫博客也是為了讓自己方便查閱東西。廢話不多少
直接上圖
這裏用到了vue的計算屬性-computed
那這裏就順便說下computed這個東西吧。
在計算屬性中科院完成各種復雜的的邏輯，包括運算，函數調用，只需要最終返回一個最終的結果。計算屬性依賴多個vue實例的數據，只要其中一項數據發生變化，計算屬性就會重新的執行，視圖也會更新。
下面直接上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<template v-if="list.length">
<table>
<thead>
<tr>
<td>商品序號</td>
<td>商品名稱</td>
<td>商品數量</td>
<td>商品單價</td>
<td>商品總價</td>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<button @click="reduce(index)">-</button>
{{item.count}}
<button @click="add(index)">+</button>
</td>
<td>{{item.price}}</td>
<td>{{item.count * item.price}}</td>
</tr>
</tbody>
</table>
<p>一共{{totalCount}}件商品總價：{{totalPrice}}</p>
</template>
<template v-else>很抱歉購物車空空如也！</template>
</div>
<script type="text/javascript">
new Vue({
el:‘#app‘,
data:{
list:[
{
id:001,
name:‘iPhone X‘,
price:8100,
count:2,
},
{
id:002,
name:‘iPhone 7‘,
price:5000,
count:6,
},
{
id:003,
name:‘iPhone 6s‘,
price:3800,
count:9,
}
]
},
methods:{
add:function(index){
//獲取當前點擊事件上面商品的數量
var buy_num = this.list[index].count;
this.list[index].count++;
},
reduce:function(index){
var buy_num = this.list[index].count;
if(buy_num<1) return;
this.list[index].count--;
}
},
computed:{
totalCount:function(){
var totalCount=0;
for(let i=0;i<this.list.length;i++){
totalCount += this.list[i].count;
}
return totalCount;
},
totalPrice:function(){
var totalPrice=0;
for(let i=0;i<this.list.length;i++){
totalPrice += this.list[i].price * this.list[i].count;
}
return totalPrice;
}
}
})
</script>
</body>
</html>
一個超簡單的vue商品計算總金額