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>
위 코드는 계산된 속성을 사용하여 성별 속성을 제외한 사용자 개체의 모든 속성을 얻은 후 최종적으로 이러한 속성을 루프로 출력합니다. 최종 출력 결과는 다음과 같습니다.
0 - name: 张三 1 - age: 20
요약하자면 v-for 명령어를 사용하여 객체를 루프아웃할 때 다음 사항에 주의해야 합니다.
위 내용은 v-for 명령어를 사용하여 Vue에서 출력 객체를 반복하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!