v-for Directive

1.  Array of strings

<template>
  <div v-for="(name, index) in names" :key="name">{{ index }}, {{ name }}</div>
</template>

<script>
export default {
  data() {
    return {
      names: ["가", "나", "다"]
      },
  },
};
</script>=

0, 가
1, 나
2, 다

 

 

2.  Array of object

<template>
  <div v-for="name in fullNmae" :key="name">
    {{ name.firstName }}, {{ name.lastname }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullNmae: [
        { firstName: "원영", lastname: "강" },
        { firstName: "봉구", lastname: "이" },
        { firstName: "수연", lastname: "최" },
    };
  },
};
</script>

//화면 결과
원영, 강
봉구, 이
수연, 최

 

3.   Array of arrays

<template>
  <div v-for="actor in actors" :key="actor.name">
    <h2>{{ actor.name }}</h2>
    <div v-for="movie in actor.movies" :key="movie">{{ movie }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      actors: [
        {
          name: "송혜교",
          movies: ["그세사", "태양의후예"],
        },
        {
          name: "송중기",
          movies: ["부자집막내아들", "빈센조"],
        },
      ],
    };
  },
};
</script>

//화면 결과
actor: 송혜교
그세사
태양의후예
actor: 송중기
부자집막내아들
빈센조

 

 

5. Block of HTML elements

<template>
  <div v-for="value in myInfo" :key="value">value속성만: {{ value }}</div>
</template>

<script>
export default {
  data() {
    return {
      myInfo: {
        name: "lili",
        age: 32,
        work: "developer",
      },
    };
  },
};
</script>

//화면 결과
value속성만: lili
value속성만: 32
value속성만: developer

 

 

6. Object key value pairs

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

<script>
export default {
  data() {
    return {
      myInfo: {
        name: "lili",
        age: 32,
        work: "developer",
      },
    };
  },
};
</script>

//화면 결과
value:lili key: name index: 0
value:32 key: age index: 1
value:developer key: work index: 2

 

 

7. conditinal list rendering

<template>
  <div v-for="name in names" :key="name">
    <h2 v-if="name === '가'">{{ name }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      names: ["가", "나", "다"]
    };
  },
};
</script>

//화면 출력
가

---

 

key attribute

  key가 필요한 이유

  DOM 트리와 비교할 때 노드를 식별하기 위해 가상 DOM에 대한 힌트가 된다.

  키 속성은 목록에서 변경된 항목, 추가, 또는 제거되었는지 확인하는데 도움이 되기때문에 UI처리에 중요한 역할을 한다.