这次给大家带来vue2.0的computed计算list循环的累加值，vue2.0 computed计算list循环累加值的注意事项有哪些，下面就是实战案例，一起来看一下。

实例如下所示：

<template>
 <p>
  </p>
<h1>{{ msg }}</h1>
  <h2>Foo</h2>
  <p>
  <!--<p>{{item }}</p>-->
  </p>
<h1>{{a[index] = item.bb}}</h1>
   <!-- <h1>index:{{index}}</h1>-->
  
  <h2>a:{{a}}</h2>
  <h2>{{cc}}</h2>
  <!--<button v-on:click="cc">点击</button>-->
 
</template><script>
export default {
 name: &#39;foo&#39;,
 data () {
  return {
   msg: &#39;这儿是Foo&#39;,
   list:[{
     insertId: &#39;asfasf252&#39;,
     bb:29
   },{
    insertId: &#39;2652&#39;,
     bb:20
   },{
    insertId: &#39;996&#39;,
     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>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

下拉框-CUSTOM DROP-DOWN LIST STYLING

下拉框-CUSTOM DROP-DOWN LIST STYLING

下载

如何修改vue请求数据中的值

vue.js中$set怎样给数组更新

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！