<div id="fruit">
<ul>
<li v-for="item in products">
{{item.name}}--{{item.count}}
<span v-show="item.count==0">卖没啦</span>
<button @click="item.count++">add</button>
<input v-model.number="item.count" />
</li>
</ul>
<p>共计{{total}}</p>
</div>
let a=new Vue({
el:'#fruit',
data:{
products:[
{name:'苹果',count:5},
{name:'香蕉',count:1},
{name:'橘子',count:0},
]
},
computed:{
total(){
return this.products.reduce((total,items)=>{return total+items.count},0);
}
}
})
效果展示
用到的知识点
1.v-for循环数据排列
2.v-show判断是否展示卖没了字样
3.@click事件点击增加数量
4. v-model语法糖数据联动显示与修改
5.reduce方法作为数据累加器求总量
reduce()
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
例子:
<p>点击按钮计算数组元素相加后的总和。</p>
<button onclick="myFunction()">点我</button>
<p>数组元素总和: <span id="demo"></span></p>
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}
结果为:125