v-for 명령어를 사용하여 Vue에서 출력 데이터를 루프하는 방법

Vue는 뷰와 데이터를 쉽게 관리할 수 있는 많은 강력한 지시문을 제공하는 인기 있는 프런트 엔드 프레임워크입니다. 가장 일반적으로 사용되는 명령어 중 하나는 데이터를 반복하여 출력할 수 있는 v-for입니다. 이 글에서는 Vue에서 v-for 지시문을 사용하여 데이터를 반복하는 방법을 알아봅니다.

먼저 v-for의 사용법을 살펴보겠습니다. 기본 구문은 다음과 같습니다.

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

위 코드에서는 v-for 명령어를 사용하여 list 배열의 데이터를 반복하고 이를 li로 출력합니다. 강요. v-for 명령은 v-for="(item, index) in list"의 세 부분으로 구성됩니다. 그 중 (item, index)는 정의된 항목과 인덱스로 필요에 따라 변경될 수 있습니다. list는 반복되는 데이터 배열입니다. v-for指令将list数组中的数据循环遍历，并输出为li元素。v-for指令由三部分组成：v-for="(item, index) in list"。其中，(item, index) 是定义的项和索引，可以根据需求自行更改。list 是被循环的数据数组。

key

key 속성은 필수이며 고유해야 합니다. 이 속성은 구성 요소를 더 빠르게 렌더링하기 위해 Vue에서 DOM 요소를 식별하는 데 사용됩니다. Vue는 키 속성이 설정되지 않은 경우 경고를 표시하므로 키 속성을 설정해야 합니다.

다음으로 v-for 명령어를 사용하여 Vue에서 데이터를 루프아웃하는 방법을 보여주는 몇 가지 구체적인 예를 살펴보겠습니다.

1. 배열을 탐색하고 목록을 출력합니다.

이 예에서는 v-for 명령어를 사용하여 배열을 반복하고 목록으로 출력합니다. 이 예에서는 ES6의 확산 연산자를 사용하여 배열을 확산합니다.

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

<script>
export default {
  data() {
    return {
      list: ['foo', 'bar', 'baz']
    }
  }
}
</script>

위의 예에서는 배열을 생성하여 Vue 인스턴스의 data 속성에 전달했습니다. 다음으로 v-for 지시문을 사용하여 배열의 각 항목을 반복하고 목록으로 렌더링합니다.

2. 객체를 탐색하고 목록을 출력합니다.

이 예에서는 v-for 명령을 사용하여 객체를 반복하고 목록으로 출력합니다. 객체의 키와 값을 사용하여 목록 항목을 표시하고 키 속성을 키 이름으로 설정했습니다.

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

<script>
export default {
  data() {
    return {
      obj: {
        foo: 'Foo',
        bar: 'Bar',
        baz: 'Baz'
      }
    }
  }
}
</script>

위의 예에서는 객체를 생성하여 Vue 인스턴스의 data 속성에 전달했습니다. 그런 다음 v-for 지시어를 사용하여 객체의 각 키-값 쌍을 반복하고 이를 목록으로 렌더링합니다.

3. 숫자를 반복하고 목록을 출력합니다

이 예에서는 v-for 명령어를 사용하여 숫자를 반복하고 목록으로 출력합니다. v-for에서는 숫자를 배열로 반복한 다음 배열에 있는 항목의 인덱스를 사용하여 개수를 셉니다.

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

위의 예에서는 v-for 명령어를 사용하여 숫자를 길이 5의 배열로 반복하고 이를 목록으로 출력합니다. 인덱스 변수를 사용하여 개수를 계산하고 1에 추가하여 시퀀스 번호를 얻습니다.

4. 배열을 탐색하고 테이블을 출력합니다

이 예에서는 v-for 명령을 사용하여 배열을 반복하고 HTML 테이블로 출력합니다. 계산된 속성을 사용하여 중첩 배열을 개별 데이터 항목으로 분할했습니다.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in flattenedList" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Alice', age: 22, gender: 'Female' },
        { name: 'Bob', age: 25, gender: 'Male' },
        { name: 'Charlie', age: 30, gender: 'Male' },
        { name: 'Diana', age: 27, gender: 'Female' }
      ]
    }
  },
  computed: {
    flattenedList() {
      return this.list.flatMap(item => [item.name, item.age, item.gender])
    }
  }
}
</script>

위의 예에서는 4개의 객체로 구성된 배열을 생성하여 Vue 인스턴스의 data 속성에 전달했습니다. 그런 다음 이를 계산된 속성으로 분할하여 중첩된 데이터 항목을 단일 데이터 항목으로 변환합니다. 다음으로 v-for 지시문을 사용하여 새 배열을 반복하고 HTML 테이블로 렌더링합니다.

요약

Vue에서는 v-for 명령어를 사용하여 데이터를 반복하는 것이 매우 간단합니다. 기본 구문을 따르고 올바른 데이터로 무장하면 복잡한 템플릿 구축을 시작할 수 있습니다. 간단한 배열을 반복하든, 더 복잡한 중첩 데이터 구조를 반복하든 관계없이 v-for 지시문을 사용하면 이를 처리하는 데 도움이 될 수 있습니다. 🎜

위 내용은 v-for 명령어를 사용하여 Vue에서 출력 데이터를 루프하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!