Vue 문서에서 v-for 지시어를 사용하는 방법

Vue는 대화형 웹 애플리케이션을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. 그 중 Vue의 v-for 명령어는 렌더링 데이터를 반복하는데 사용되는 중요한 명령어 중 하나입니다. 이 글에서는 Vue 문서에서 v-for 지시문을 사용하는 방법을 소개합니다.

v-for 지시어는 애플리케이션에서 유사한 데이터를 반복적으로 렌더링하고 처리하는 데 도움이 될 수 있습니다. 구문 형식은 다음과 같습니다:

v-for="(item, index) in items"

그중 "items"는 반복하고 렌더링하려는 데이터 컬렉션이며 배열 또는 객체일 수 있습니다. 루프 중에 "item"을 사용하여 현재 처리 중인 항목을 나타내고 "index"를 사용하여 현재 항목의 인덱스 값을 나타낼 수 있습니다.

다음은 v-for 지시문을 사용하여 배열을 렌더링하는 예입니다.

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子']
    }
  }
}
</script>

이 예에서는 v-for 지시문을 사용하여 세 개의 목록 항목이 있는 순서가 지정되지 않은 목록을 렌더링합니다. 루프 중에 "item"을 사용하여 배열의 현재 항목을 나타내고 "index"를 사용하여 현재 항목의 인덱스 값을 나타냅니다. 또한 ":key" 지시문을 사용하여 렌더링된 각 목록 항목에 대한 고유 식별자를 제공합니다.

배열 외에도 v-for 지시어를 사용하여 객체의 속성을 렌더링할 수도 있습니다. 다음은 개체 속성을 렌더링하는 예입니다.

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

<script>
export default {
  data() {
    return {
      object: {
        name: '李雷',
        age: 30,
        location: '中国北京'
      }
    }
  }
}
</script>

이 예에서는 개체의 속성을 렌더링합니다. 루프 중에 "값"을 사용하여 현재 속성의 값을 나타내고 "키"를 사용하여 현재 속성의 이름을 나타냅니다. 이번에도 ":key" 지시문을 사용하여 렌더링된 각 목록 항목에 대한 고유 식별자를 제공합니다.

기본 루프 외에도 v-for 지시문은 동적 렌더링을 구현하기 위해 계산된 속성 및 메서드 사용을 지원합니다. 다음은 계산된 속성을 사용하여 데이터를 렌더링하는 예입니다.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in computedItems" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子']
    }
  },
  computed: {
    computedItems() {
      return this.items.map((item) => {
        return item.toUpperCase()
      })
    }
  }
}
</script>

이 예에서는 계산된 속성 "computedItems"를 사용하여 원래 배열의 모든 요소가 대문자로 변환된 새 배열을 반환합니다. 그런 다음 v-for 지시문을 사용하여 이 계산된 속성의 값을 렌더링합니다.

v-for 지시문은 조건부 렌더링을 구현하기 위한 v-if 지시문의 사용도 지원합니다. 다음은 v-if 지시문을 사용하여 데이터를 렌더링하는 예입니다.

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子', '草莓', '西瓜']
    }
  }
}
</script>

이 예에서는 배열의 홀수 항목을 렌더링합니다. 루프 동안 v-if 명령어를 사용하여 현재 항목의 인덱스가 짝수인지 확인합니다. 짝수이면 현재 항목의 값이 렌더링되고, 짝수이면 현재 항목이 렌더링되지 않습니다.

간단히 말하면 v-for 명령어는 Vue에서 루프 렌더링 데이터를 구현하는 데 사용되는 중요한 명령어 중 하나입니다. 위의 소개를 통해 Vue에서 v-for 명령어를 사용하는 방법을 마스터하셨다고 생각합니다. 실제 개발에서는 특정 상황에 따라 다양한 루프 방법을 선택하고 이를 다른 지침 및 구성 요소와 함께 사용하여 보다 유연하고 효율적인 웹 애플리케이션을 구축할 수 있습니다.

위 내용은 Vue 문서에서 v-for 지시어를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!