快捷導(dǎo)航

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ì)大家有所幫助。一起跟隨小編過來看看吧

實(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)文章

詳解在vue-test-utils中mock全局對(duì)象
這篇文章主要介紹了詳解在vue-test-utils中mock全局對(duì)象，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
VueCli4項(xiàng)目配置反向代理proxy的方法步驟
這篇文章主要介紹了VueCli4項(xiàng)目配置反向代理proxy的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
vue el-table實(shí)現(xiàn)多選框回填的示例代碼
摘要：Vue多選框回填是實(shí)現(xiàn)表單數(shù)據(jù)高效處理的常見需求,本文主要介紹了vue el-table實(shí)現(xiàn)多選框回填的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01
TDesign在vitest的實(shí)踐示例詳解
這篇文章主要為大家介紹了TDesign在vitest的實(shí)踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
安裝vue/cli后查看版本顯示找不到vue指令的解決
這篇文章主要介紹了安裝vue/cli后查看版本顯示找不到vue指令的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue?先初始化父組件再初始化子組件的方法(自定義父子組件mounted執(zhí)行順序)
這篇文章主要介紹了Vue?先初始化父組件再初始化子組件的方法（自定義父子組件mounted執(zhí)行順序）,本篇內(nèi)容內(nèi)容主要講述了,在使用?Konva?進(jìn)行開發(fā)過程中遇到的一些問題,需要的朋友可以參考下
2024-07-07
vue使用v-for循環(huán)獲取數(shù)組最后一項(xiàng)
這篇文章主要介紹了vue使用v-for循環(huán)獲取數(shù)組最后一項(xiàng)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
el-table渲染慢卡頓問題最優(yōu)解決方案
本文主要介紹了el-table渲染慢卡頓問題最優(yōu)解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
淺談vux之x-input使用以及源碼解讀
這篇文章主要介紹了淺談vux之x-input使用以及源碼解讀，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
Vue SPA 如何解決瀏覽器緩存問題
這篇文章主要介紹了Vue SPA 如何解決瀏覽器緩存問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08