vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例

更新時(shí)間：2018年03月07日 14:51:52 作者：huang100qi

下面小編就為大家分享一篇vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

實(shí)例如下所示：

<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">點(diǎn)擊</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 計(jì)算list循環(huán)后累加值的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

element表格行列拖拽的實(shí)現(xiàn)示例
本文主要介紹了element表格行列拖拽的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
vue中使用v-model完成組件間的通信
vue中有一個(gè)很神奇的東西叫v-model，它可以完成我們的需求。，本文重點(diǎn)給大家介紹vue中使用v-model完成組件間的通信,需要的朋友可以參考下
2019-08-08
使用v-memo緩存模板子樹(shù)提高應(yīng)用性能詳解
這篇文章主要為大家介紹了使用v-memo緩存模板子樹(shù)提高應(yīng)用性能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue自動(dòng)化注冊(cè)全局組件腳本分享
這篇文章主要介紹了Vue自動(dòng)化注冊(cè)全局組件腳本，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
過(guò)濾器vue.filters的使用方法實(shí)現(xiàn)
這篇文章主要介紹了過(guò)濾器vue.filters的使用方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
Vue如何實(shí)現(xiàn)驗(yàn)證碼輸入交互
這篇文章主要介紹了Vue實(shí)現(xiàn)驗(yàn)證碼輸入交互的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-12-12
vue loadmore組件上拉加載更多功能示例代碼
這篇文章主要介紹了vue loadmore組件上拉加載更多功能示例代碼,需要的朋友可以參考下
2017-07-07
vue實(shí)現(xiàn)上傳圖片添加水印
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)上傳圖片添加水印，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
詳解vue2父組件傳遞props異步數(shù)據(jù)到子組件的問(wèn)題
本篇文章主要介紹了vue2父組件傳遞props異步數(shù)據(jù)到子組件的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
Vue 組件間的樣式?jīng)_突污染
本篇文章主要介紹了Vue 組件間的樣式?jīng)_突污染，當(dāng)多個(gè)樣式出現(xiàn)時(shí)，就會(huì)導(dǎo)致樣式?jīng)_突，本文介紹了具體解決方法
2017-08-08