>웹 프론트엔드 >JS 튜토리얼 >vue2.0의 계산은 목록 루프의 누적 값을 계산합니다.

vue2.0의 계산은 목록 루프의 누적 값을 계산합니다.

php中世界最好的语言
php中世界最好的语言원래의
2018-03-28 15:14:582945검색

이번에는 리스트 루프의 누적값을 계산하기 위해 vue2.0에서 계산한 값을 가져오겠습니다. vue2.0에서 리스트 루프의 누적값을 계산하기 위해 계산한 주의사항은 무엇입니까? 사례를 살펴보겠습니다.

예제는 다음과 같습니다.

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

vue 요청 데이터의 값을 수정하는 방법

vue.js의 $set에서 배열을 업데이트하는 방법

위 내용은 vue2.0의 계산은 목록 루프의 누적 값을 계산합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.