vue2.0 berechnete Instanz der Berechnung des akkumulierten Werts nach der Listenschleife

Im Folgenden werde ich Ihnen ein Beispiel für die Berechnung des akkumulierten Werts nach einer Listenschleife durch vue2.0 vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Das Beispiel ist wie folgt:

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird für alle hilfreich sein Zukunft.

Verwandte Artikel:

Lösen Sie das Problem einer Vue-Einzelseite mithilfe der Keep-Alive-Seite, um ohne Aktualisierung zurückzukehren

Lösen Sie die Vue-Seite zu Aktualisieren oder zurückgehen Problem fehlender Parameter

Instanz der Ausführung einer Funktion nach Verlassen der Vue-Seite

Das obige ist der detaillierte Inhalt vonvue2.0 berechnete Instanz der Berechnung des akkumulierten Werts nach der Listenschleife. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!