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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <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',
data () {
return {
msg: & #39;这儿是Foo',
list:[{
insertId: & #39;asfasf252',
bb:29
},{
insertId: & #39;2652',
bb:20
},{
insertId: & #39;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>
|
Nach dem Login kopieren
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!