v-for 명령어를 사용하여 Vue에서 출력 객체를 반복하는 방법-View.js-php.cn

v-for 명령어를 사용하여 Vue에서 출력 객체를 반복하는 방법

PHPz

풀어 주다： 2023-06-11 08:51:17

원래의

6264명이 탐색했습니다.

Vue에서 v-for는 배열이나 객체를 반복하기 위해 템플릿에서 사용할 수 있는 명령어입니다. v-for 지시문은 렌더링 데이터를 반복하는 데 사용되며 Vue에서 매우 유용한 명령 중 하나입니다. Vue에서 v-for 명령어를 사용하여 객체를 루프아웃하는 방법은 약간의 차이만 제외하고 배열을 루프아웃하는 방법과 유사합니다.

v-for 명령을 사용하여 출력 개체를 반복하는 방법은 무엇입니까? 아래에서는 다음 부분에서 설명하겠습니다.

1. v-for 명령어의 기본 사용법

v-for 명령어의 기본 구문은 다음과 같습니다.

<div v-for="(item,index) in items">{{ index }} - {{ item }}</div>

로그인 후 복사

그중 items는 반복되는 배열 또는 객체를 나타냅니다. index는 Index의 요소를 배열이나 객체로 나타냅니다.

배열을 예로 들면 다음과 같이 배열의 요소를 반복할 수 있습니다:

<div v-for="(item,index) in items">{{ index }} - {{ item }}</div>

로그인 후 복사

2. 객체의 속성을 반복합니다.

Vue에서는 v-for 명령을 사용하여 다음을 반복할 수 있습니다. ：

<div v-for="(value,key,index) in object">{{ index }} - {{ key }}: {{ value }}</div>

로그인 후 복사

그중 object는 반복되는 객체를 나타내고, value는 반복되는 속성 값을 나타내고, index는 반복되는 속성 이름을 나타냅니다. 개체에서.

구체적인 예를 살펴보겠습니다.

<template>
  <div>
    <div v-for="(value,key,index) in user">
      {{ index }} - {{ key }}: {{ value }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 20,
        sex: '男'
      }
    }
  }
}
</script>

로그인 후 복사

위 코드는 사용자 개체의 속성을 반복하면서 속성이 위치한 개체의 인덱스, 속성 이름, 속성 값을 순차적으로 출력합니다. 최종 출력은 다음과 같습니다.

0 - name: 张三
1 - age: 20
2 - sex: 男

로그인 후 복사

3. v-for 명령어를 사용하여 속성을 반복적으로 계산합니다.

Vue에서는 v-for 명령어를 사용하여 속성을 반복적으로 계산할 수도 있는데, 이는 일부 특수 애플리케이션 시나리오에 매우 유용합니다. .

예를 들어, 계산된 속성을 사용하여 객체의 기준을 충족하는 모든 속성을 얻을 수 있습니다. 구체적인 코드는 다음과 같습니다.

<template>
  <div>
    <div v-for="(value,key,index) in filteredUser">
      {{ index }} - {{ key }}: {{ value }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 20,
        sex: '男'
      }
    }
  },
  computed: {
    filteredUser() {
      return Object.keys(this.user).reduce((result, key) => {
        if (key !== 'sex') {
          result[key] = this.user[key];
        }
        return result;
      }, {});
    }
  }
}
</script>

로그인 후 복사

위 코드는 계산된 속성을 사용하여 성별 속성을 제외한 사용자 개체의 모든 속성을 얻은 후 최종적으로 이러한 속성을 루프로 출력합니다. 최종 출력 결과는 다음과 같습니다.