[Vue] v-for 반복문 사용

[ 반복문으로 배열값 출력 ]

  <template>

    <div class="hello">

      <h1>Hello</h1>

      <div>배열은 : {{ arr }} 로 출력하고,

        배열속성값은 {{ arr[0] }}, {{ arr[1] }} ... 로 출력. </div>

    </div>

  </template>

 

  <script>

  export default {

    name: 'HelloWorld',

    data(){

      return{

        arr: [1, 2, 3, 4, 5, 6, 7]

      };

    },

  };

  </script>

 

  <style>

 

  </style>

아래처럼 출력된다.

---

  <template>

    <div class="hello">

      <h1>Hello</h1>

      <div v-for="n in arr" :key="n">{{ arr[n] }}</div>

      <hr>

      <div v-for="(n, index) in arr" :key="index">{{ arr[index] }}</div>

    </div>

  </template>

아래처럼 출력된다.

배열 index는 0부터지만 v-for 반복문은 1부터 센다.

:key 속성

 중복되지 않고 고유한 값이어야 하며, 보통은 아이템의 고유한 식별자인 고유한 키 값을 사용

 

* 위처럼 배열의 index를 :key속성으로 줄 수도 있지만 

배열요소가 추가되거나 삭제될 때 문제가 발생할 수 있으므로 배열의 요소가 고유한 키 값을 가지는 것이 안전

---

배열에서 원하는 index의 요소까지만 출력하고 싶다면 

 

<div v-for="(n, index) in arr.slice(0,3)" :key="index">{{ arr[index] }}</div>

 

아래처럼 arr 배열의 0번째, 1번째, 2번째 요소까지만 출력