v-for를 사용하여 Vue에서 객체와 배열을 반복하는 방법-View.js-php.cn

v-for를 사용하여 Vue에서 객체와 배열을 반복하는 방법

王林

풀어 주다： 2023-06-11 10:09:22

원래의

2432명이 탐색했습니다.

Vue.js는 개발자가 효율적이고 복잡한 웹 애플리케이션을 구축할 수 있도록 다양한 지침, 구성 요소 및 방법을 제공하는 매우 인기 있는 프런트 엔드 프레임워크입니다. 그중 v-for는 가장 일반적으로 사용되는 명령어 중 하나로, 템플릿의 루프 구조를 사용하여 객체와 배열의 데이터를 빠르고 쉽게 반복할 수 있습니다. 아래에서는 v-for를 사용하여 Vue에서 객체와 배열을 반복하는 방법을 자세히 소개합니다.

1. 배열 반복

Vue 템플릿에서는 v-for 명령어를 사용하여 배열의 데이터를 반복할 수 있습니다. 구문 형식은 다음과 같습니다.

<div v-for="(item, index) in array" :key="item.id">{{ item.value }}-{{ index }}</div>

로그인 후 복사

그 중 item은 배열의 요소를 나타내고, index는 배열의 현재 요소의 인덱스를 나타내며, array는 반복할 배열을 나타냅니다. 괄호를 사용하여 항목과 인덱스를 묶고 in 키워드를 사용하여 배열 이름과 구분할 수 있습니다.

위의 예에서는 Vue가 다시 렌더링될 때 성능을 향상시키기 위해 :key 속성을 사용하여 반복되는 각 요소에 대한 고유 식별자를 지정했습니다.

다음과 같은 숫자가 포함된 배열이 있는 경우:

<script>
  export default {
    data() {
      return {
        numbers: [1, 2, 3, 4, 5]
      }
    }
  }
</script>

로그인 후 복사

템플릿에서 v-for를 사용하여 반복할 수 있습니다.

<ol>
  <li v-for="number in numbers" :key="number">{{ number }}</li>
</ol>

로그인 후 복사

이렇게 하면 각 항목이 배열 번호의 항목인 순서 목록이 생성됩니다.

배열을 렌더링하기 위해 템플릿에서 v-for를 사용하는 것 외에도 Vue의 계산된 속성에서 배열을 처리한 다음 템플릿에서 사용할 수도 있습니다. 예를 들어, 배열의 짝수를 필터링하는 계산된 속성을 만들 수 있습니다.

<script>
  export default {
    data() {
      return {
        numbers: [1, 2, 3, 4, 5]
      }
    },
    computed: {
      evenNumbers() {
        return this.numbers.filter((number) => number % 2 === 0)
      }
    }
  }
</script>

<ol>
  <li v-for="number in evenNumbers" :key="number">{{ number }}</li>
</ol>

로그인 후 복사

이렇게 하면 배열의 짝수만 표시하는 목록이 생성됩니다.

2. 객체 반복

배열과 유사하게 Vue에서는 v-for를 사용하여 객체의 속성을 반복할 수도 있습니다. 구문 형식은 다음과 같습니다.

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

로그인 후 복사

그 중 value는 객체에 있는 속성의 값을 나타내고, key는 속성의 이름을 나타내며, object는 반복할 객체를 나타냅니다.

다음과 같은 사용자 정보가 포함된 개체가 있는 경우:

<script>
  export default {
    data() {
      return {
        user: {
          name: 'Alice',
          age: 30,
          email: 'alice@example.com'
        }
      }
    }
  }
</script>

로그인 후 복사

v-for를 사용하여 개체를 반복하고 그 안의 속성을 렌더링할 수 있습니다.

<dl>
  <dt>User info</dt>
  <dd v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</dd>
</dl>

로그인 후 복사

이렇게 하면 각 구문 이름에 대해 하나의 속성이 표시되는 정의 목록이 생성됩니다. 그리고 그 가치.

객체를 렌더링하기 위해 템플릿에서 v-for를 사용하는 것 외에도 Vue의 계산된 속성에서 객체를 처리한 다음 템플릿에서 사용할 수도 있습니다. 예를 들어 계산된 속성을 생성하여 사용자가 25세 이상인 속성을 필터링할 수 있습니다.

<script>
  export default {
    data() {
      return {
        user: {
          name: 'Alice',
          age: 30,
          email: 'alice@example.com'
        }
      }
    },
    computed: {
      ageOver25() {
        return Object.keys(this.user)
          .filter((key) => key === 'age' ? this.user[key] > 25 : true)
          .reduce((obj, key) => {
            obj[key] = this.user[key]
            return obj
          }, {})
      }
    }
  }
</script>

<dl>
  <dt>User info (age over 25)</dt>
  <dd v-for="(value, key) in ageOver25" :key="key">{{ key }}: {{ value }}</dd>
</dl>

로그인 후 복사

이렇게 하면 사용자가 25세 이상인 속성만 표시하는 정의된 목록이 생성됩니다.

Summary

v-for는 Vue에서 매우 일반적으로 사용되는 명령으로, 이를 통해 템플릿의 루프 구조를 사용하여 배열과 객체의 데이터를 빠르고 쉽게 반복할 수 있습니다. 실제 개발에서는 목록, 테이블 등의 데이터 구조를 동적으로 렌더링하기 위해 v-for를 자주 사용하게 되므로 v-for를 능숙하게 사용하는 것이 매우 중요합니다.

위 내용은 v-for를 사용하여 Vue에서 객체와 배열을 반복하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!