首頁 > web前端 > js教程 > 主體

vue2.0 computed 計算list循環後累加值的實例

亚连
發布: 2018-05-31 17:30:27
原創
2297 人瀏覽過

下面我就為大家分享一篇vue2.0 computed 計算list循環後累加值的實例,具有很好的參考價值,希望對大家有幫助。

實例如下:

<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>
登入後複製

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

解決vue單頁使用keep-alive頁面返回不刷新的問題

解決vue頁面刷新或後退參數遺失的問題

vue頁面離開後執行函數的實例

#

以上是vue2.0 computed 計算list循環後累加值的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板