vue2.0 computed 计算list循环后累加值的实例

实例如下所示：<template><divclass="hello"><h1>{{msg}}</h1><h2>Foo</h2><div

实例如下所示：

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 <h2>Foo</h2>
 <div v-for ="(item, index) in list">
 <!--<p>{{item }}</p>-->
 <h1 v-show="false">{{a[index] = item.bb}}</h1>
 <!-- <h1>index:{{index}}</h1>-->
 </div>
 <h2>a:{{a}}</h2>
 <h2>{{cc}}</h2>
 <!--<button v-on:click="cc">点击</button>-->
 </div>
</template>
<script>
export default {
 name: 'foo',
 data () {
 return {
 msg: '这儿是Foo',
 list:[{
 insertId: 'asfasf252',
 bb:29
 },{
 insertId: '2652',
 bb:20
 },{
 insertId: '996',
 bb:18
 }],
 a:[]
 }
 },
 computed:{
 cc: function(){
 var sum = 0;
 for(var i= 0 ;i< this.a.length; i++) {
 sum += parseInt(this.a[i]);
 }
 return sum;
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

以上这篇vue2.0 computed 计算list循环后累加值的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。