Vue3 - 목록 렌더링

## V-for 

 

V-for 디렉티브를 사용하여 배열인 목록을 렌더링할 수 있습니다.

 

 

V-for=“item in items” 문법을 사용해서 배열에서 항목을 순차적으로 할당합니다.

v-for=“(item, index) in items” 문법을 사용해서 배열 인덱스를 가져올 수 있습니다.

항목을 나열할 때 각 :key 속성에는 고유한 값을 지정해야합니다. (vue2.2.0 부터 필수)

 

   const items = reactive([

      { id: 1, message: 'Java' },

      { id: 2, message: 'HTML' },

      { id: 3, message: 'CSS' },

      { id: 4, message: 'Javascript' },

    ]);

 

    <li v-for="(item, index) in items" :key="item.id">

      {{ item.message }}

    </li>

 

 

V-for 객체

 

v-for를 사용하여 객체의 속성을 반복할 수도 있습니다.

 

   const myObject = reactive({

      title: '제목입니다.',

      author: '홍길동',

      publishedAt: '2016-04-10',

    });

 

<li v-for="(value, key, index) in myObject" :key="key">

        {{ key }} - {{ value }} - {{ index }}

</li>

 

(예제)

<template>
  <div>
    <ul>
      <template v-for="(item, index) in evenItems">
        <!-- <li v-if="item.id % 2 === 0"> -->
          ID: {{ item.id }} 인덱스: {{ index }}, {{ item.message }}
        <!-- </li> -->
      </template>
      <li v-for="(value, key, index) in myObject" :key="key">
        {{ key }} - {{ value }} - {{ index }}
      </li>
    </ul>
    <hr />
    <ul>
      <li v-for="(value, key, index) in myObject">
      {{ index }} - {{ key }} - {{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive, computed } from 'vue';

export default {
  setup () {
    const items = reactive([
      { id: 1, message: 'JAVA' },
      { id: 2, message: 'HTML' },
      { id: 3, message: 'CSS' },
      { id: 4, message: 'JavaScript' },
    ])    

    const myObject = reactive({
      title: '제목',
      author: '홍길동',
      publishedAt: '2016-01-01',
    });

    const evenItems = computed(() => items.filter(item => item.id % 2 === 0));
    return { items, evenItems, myObject }
  }
}
</script>

<style lang="scss" scoped>

</style>