vue에서 vfor를 사용하는 방법

Vue.js의 v-for 지시문은 현재 항목을 나타내는 항목과 현재 인덱스를 나타내는 선택적 인덱스를 제공하여 항목 목록을 동적으로 렌더링하기 위해 배열이나 객체를 순회하는 데 사용됩니다. 이 지시어는 배열과 객체를 반복하고 :key 속성을 사용하여 고유 키를 지정하여 성능을 최적화하는 데 사용할 수 있습니다.

Vue.js에서 v-for 사용

v-for는 배열이나 객체를 탐색하기 위해 Vue.js에 내장된 명령어입니다. 이를 통해 각 항목에 고유한 키를 제공하면서 목록의 항목을 동적으로 렌더링할 수 있습니다.

Syntax

<code><template v-for="(item, index) in collection">
  <!-- 渲染项目 -->
</template></code>

Parameters

<li> item: 목록의 현재 항목입니다. <li> index: 현재 항목의 색인(선택 사항)입니다. <li> collection: 탐색할 배열 또는 객체입니다.

Usage

배열 반복

<code><ul>
  <li v-for="item in names">{{ item }}</li>
</ul></code>

이렇게 하면 names 배열의 각 항목에 대해 <li> 요소가 생성되고 표시됩니다. 품목 가치. names 数组中的每个项目创建一个 <li> 元素，并显示项目值。

遍历对象

<code><ul>
  <li v-for="key in object">{{ key }}: {{ object[key] }}</li>
</ul></code>

这将为 object 对象中的每个键创建一个 <li> 元素，并显示键和值。

使用 index

v-for 指令还有一个可选的 index 参数，它提供当前项目的索引：

<code><ul>
  <li v-for="(item, index) in names">{{ index + 1 }}: {{ item }}</li>
</ul></code>

唯一键

每个 v-for 项目都必须具有一个唯一的键。这是因为 Vue.js 使用该键来跟踪项目的变化，并有效地更新 DOM。您可以使用 :key

객체 반복

<code><ul>
  <li v-for="item in names" :key="item">{{ item }}</li>
</ul></code>

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