⼀个超简单的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>
{{unt}}
<button @click="add(index)">+</button>
</td>
<td>{{item.price}}</td>
tabletotal函数<td>{{unt * 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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。