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

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

Mar 28, 2018 pm 03:14 PM
computed list

이번에는 리스트 루프의 누적값을 계산하기 위해 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으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

PHP에서 Redis 목록 작업을 구현하는 방법 PHP에서 Redis 목록 작업을 구현하는 방법 May 26, 2023 am 11:51 AM

목록 작업 //목록의 선두에서 값을 삽입합니다. $ret=$redis->lPush('city','guangzhou');//목록 끝에 값을 삽입합니다. $ret=$redis->rPush('city','guangzhou');//목록의 지정된 범위에 있는 요소를 가져옵니다. 0은 목록의 첫 번째 요소를 나타내고, -1은 마지막 요소를 나타내고, -2는 끝에서 두 번째 요소를 나타냅니다. $ret=$redis->l

JSONArray를 Java의 List로 변환하는 방법 JSONArray를 Java의 List로 변환하는 방법 May 04, 2023 pm 05:25 PM

1:JSONArray转ListJSONArray자세한 내용은 JSONArrayJSONArrayarray=newJSONArray();array.add(0,"a");array.add(1,"b");array.add(2,"c") ;Listlist=JSONObject.parseArray(array.toJSONString(),String.class);System.out.println(list.to

C#에서 List.Sort 함수를 사용하여 목록을 정렬하는 방법 C#에서 List.Sort 함수를 사용하여 목록을 정렬하는 방법 Nov 17, 2023 am 10:58 AM

C#에서 List.Sort 함수를 사용하여 목록을 정렬하는 방법 C# 프로그래밍 언어에서는 목록을 정렬해야 하는 경우가 많습니다. List 클래스의 Sort 기능은 이러한 목적으로 설계된 강력한 도구입니다. 이 문서에서는 C#에서 List.Sort 함수를 사용하여 목록을 정렬하는 방법을 소개하고 독자가 이 함수를 더 잘 이해하고 적용하는 데 도움이 되는 특정 코드 예제를 제공합니다. List.Sort 함수는 목록의 요소를 정렬하는 데 사용되는 List 클래스의 멤버 함수입니다. 이 함수는 수신

Java 기본에서 List의 일반적인 방법은 무엇입니까 Java 기본에서 List의 일반적인 방법은 무엇입니까 May 14, 2023 am 10:16 AM

1. List 인터페이스 소개 List는 순서가 있는 모음이자 반복 가능한 모음입니다. Collection 인터페이스를 상속받았으며, 반복되는 요소는 List 컬렉션에 나타날 수 있으며, 지정된 위치의 요소는 인덱스(아래 첨자)를 통해 액세스할 수 있습니다. 2. 공통 메소드 나열 - voidadd(intindex, Obejctelement) 메소드 1. voidadd(intindex, Obejctelement) 메소드는 지정된 위치에 요소 요소를 삽입하고 후속 요소를 한 요소 뒤로 이동합니다. 2.voidadd(intindex,객체 요소

Java에서 배열을 목록으로 변환하는 방법 Java에서 배열을 목록으로 변환하는 방법 Apr 19, 2023 am 09:13 AM

1. 가장 일반적인 방법(반드시 최선은 아님)은 Arrays.asList(strArray)를 사용하는 것입니다. 배열을 List로 변환한 후에는 List를 추가하거나 삭제할 수 없으며 확인하고 수정만 할 수 있습니다. 그렇지 않으면 예외가 발생합니다. . 키 코드: Listlist=Arrays.asList(strArray);privatevoidtestArrayCastToListError(){String[]strArray=newString[2];Listlist=Arrays.asList(strArray);//변환된 목록에 데이터 조각을 삽입합니다. list.add( " 1&quot

list.sort()가 Python에서 정렬된 목록을 반환하지 않는 이유는 무엇입니까? list.sort()가 Python에서 정렬된 목록을 반환하지 않는 이유는 무엇입니까? Sep 18, 2023 am 09:29 AM

예 이 예에서는 계속하기 전에 먼저 list.sort()의 사용법을 살펴보겠습니다. 여기서는 목록을 생성하고 sort() 메서드를 사용하여 오름차순으로 정렬했습니다. - #CreatingaListmyList=["Jacob","Harry","Mark","Anthony"]#DisplayingtheListprint("List=",myList)# SorttheListsinAscendingOrdermyList .sort(

Vue 오류: 계산된 속성을 데이터 계산에 올바르게 사용할 수 없습니다. 해결 방법은 무엇입니까? Vue 오류: 계산된 속성을 데이터 계산에 올바르게 사용할 수 없습니다. 해결 방법은 무엇입니까? Aug 18, 2023 am 10:58 AM

Vue 오류: 계산된 속성을 데이터 계산에 올바르게 사용할 수 없습니다. 해결 방법은 무엇입니까? Vue로 개발할 때 계산된 속성은 매우 일반적으로 사용되는 강력한 기능으로, 데이터를 계산하고 처리하는 데 도움이 됩니다. 그러나 때때로 데이터 계산에 계산된 속성을 올바르게 사용할 수 없는 등의 문제가 발생합니다. 이때 이 문제를 해결해야 합니다. 다음은 이 문제를 설명하는 간단한 예입니다.&lt;템플릿&gt;&

Vue3의 계산 함수에 대한 자세한 설명: 계산된 속성의 사용을 용이하게 하는 애플리케이션 Vue3의 계산 함수에 대한 자세한 설명: 계산된 속성의 사용을 용이하게 하는 애플리케이션 Jun 18, 2023 am 08:45 AM

Vue는 매우 인기 있는 프런트 엔드 개발 프레임워크로 매우 편리하고 실용적인 계산 속성 계산 기능을 제공합니다. Vue3에서는 계산 기능도 업그레이드 및 개선되어 사용하기 쉽고 효율적이 되었습니다. 계산은 먼저 Vue의 템플릿에서 직접 사용할 수 있는 값을 반환하는 함수입니다. 계산된 함수의 특별한 점은 반환 값이 의존하는 Vue 인스턴스의 데이터에 따라 동적으로 변경된다는 것입니다.

See all articles