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

Vue.js는 개발자가 대화형 웹 애플리케이션을 보다 쉽게 ​​구축할 수 있는 유연한 JavaScript 프레임워크입니다. Vue에서는 v-for 지시문을 사용하여 배열이나 객체를 반복하고 해당 HTML 요소를 생성할 수 있습니다.

Array iteration

Vue.js에서는 v-for 지시문을 사용하여 배열을 반복할 수 있습니다. 다음은 간단한 예입니다.

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

<script>
export default {
  data() {
    return {
      items: ["apple", "banana", "orange"],
    };
  },
};
</script>

위 예에서 v-for 명령어는 항목 배열을 반복합니다. 명령어의 항목과 인덱스는 각각 배열의 각 요소와 배열의 해당 첨자를 나타냅니다. 참고: 중복 경고를 방지하려면 :key 속성을 사용하여 고유 키를 지정해야 합니다(이 경우 배열 인덱스를 키로 사용합니다).

객체 반복

배열 반복 외에도 Vue.js를 사용하면 객체를 반복할 수도 있습니다. 다음은 간단한 예입니다.

<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: "Tom",
        age: 18,
        hobby: "swimming",
      },
    };
  },
};
</script>

위의 예에서 v-for 명령어는 객체 객체를 반복합니다. 명령어의 값과 키는 각각 개체의 각 값과 해당 키를 나타냅니다. 배열 반복과 마찬가지로 :key를 사용하여 고유 키를 지정해야 합니다(이 경우 객체의 키를 키로 사용합니다).

Summary

Vue.js의 v-for 지시문을 사용하면 배열이나 객체를 더 쉽게 반복할 수 있습니다. 배열이나 객체를 반복할 때 중복을 피하기 위해 :key를 사용하여 고유 키를 지정해야 합니다.

이 글이 여러분과 행복한 코딩에 도움이 되기를 바랍니다!

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