vue2.0 computed instance of calculating the accumulated value after list loop

Below I will share with you an example of vue2.0 computed calculating the accumulated value after a list loop. It has a good reference value and I hope it will be helpful to everyone.

The example is as follows:

<template>
 <p class="hello">
  <h1>{{ msg }}</h1>
  <h2>Foo</h2>
  <p v-for ="(item, index) in list">
  <!--<p>{{item }}</p>-->
  <h1 v-show="false">{{a[index] = item.bb}}</h1>
   <!-- <h1>index:{{index}}</h1>-->
  </p>
  <h2>a:{{a}}</h2>
  <h2>{{cc}}</h2>
  <!--<button v-on:click="cc">点击</button>-->
 </p>
</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 scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Solve the problem of vue single page using keep-alive page return without refreshing

Solve vue page refresh or back The problem of missing parameters

Instance of executing function after leaving the vue page

The above is the detailed content of vue2.0 computed instance of calculating the accumulated value after list loop. For more information, please follow other related articles on the PHP Chinese website!