当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue2.0 computed 计算list循环后累加值的实例

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

2018年03月19日  | 移动技术网IT编程  | 我要评论

天津试管婴儿费用,泊君超级站群,充气姐

实例如下所示：

<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循环后累加值的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网