vue2.0 instance calculée de calcul de la valeur accumulée après la boucle de liste

Ci-dessous, je vais partager avec vous un exemple de vue2.0 calculé en calculant la valeur accumulée après une boucle de liste. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

L'exemple est le suivant :

<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>

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde. à l'avenir.

Articles connexes :

Résoudre le problème de la vue d'une seule page en utilisant la page keep-alive pour revenir sans actualiser

Résoudre la page de vue pour actualiser ou revenir en arrière Problème de paramètres manquants

Instance d'exécution de la fonction après avoir quitté la page vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!