v-for
디렉티브를 사용하여 배열인 목록을 렌더링 할 수 있다.<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">
{{ item }}
</li>
</ul>
</div>
</template>
import { reactive } from "vue";
export default {
setup() {
const items = reactive([
{ id: 1, message: "java" },
{ id: 2, message: "HTML" },
{ id: 3, message: "CSS" },
{ id: 4, message: "javaScript" },
]);
return {
items,
};
},
};
항목을 나열할 때 각 :key
속성에는 고유한 값을 지정해야 한다. (vue 2.2.0부터 필수) 자세한 사항은 https://ko.vuejs.org/api/built-in-special-attributes.html#key 확인 가능하다.
객체가 담겨져 있기 때문에 객체가 보이며 .message
를 입력하면
message
를 출력할 수 있다. 그리고 key
특수한 속성에 고유값을 지정해줘야 한다. 그리고 배열의 index
를 가지고 오고 싶으면
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="item.id">
인덱스 {{ index }} / {{ item.message }}
</li>
</ul>
</div>
</template>
(item, index)
를 이용해 index
를 가져올 수 있다. 두번째로 id
가 짝수인 것만 찾을 수 있는데. 이럴경우 v-if
가 필요하다. v-if
와 v-for
은 같이 사용할 수 없기에 태그를 하나 더 감싸주어서 사용한다.
<template>
<div>
<ul>
<template v-for="(item, index) in items" :key="item.id">
<li v-if="item.id % 2 === 0">
{{ item.id }} 인덱스 {{ index }} / {{ item.message }}
</li>
</template>
</ul>
</div>
</template>
computed
를 사용해보자 filter
를 사용해서 만들기에 자세한 사용법은 검색해보자.
<template>
<div>
<ul>
<template v-for="(item, index) in evenItems" :key="item.id">
<!-- <li v-if="item.id % 2 === 0"> -->
<li>{{ item.id }} 인덱스 {{ index }} / {{ item.message }}</li>
</template>
</ul>
</div>
</template>
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 evenItems = computed(() => items.filter(item => item.id % 2 === 0));
return {
items,
evenItems,
};
},
};
이렇게 computed
를 이용해서 만들 수 있다.
v-for
를 사용하여 객체의 속성을 반복 할 수도 있다.value
-> 각 속성의 값(제목)key
- > 각 속성의 이름(타이틀)index
-> 객체의 속성의 각 인덱스<template>
<div>
<ul>
<li v-for="(value, key, index) in myObject" :key="key">
value: {{ value }} / key: {{ key }} / index: {{ index }}
</li>
</ul>
</div>
</template>
import { reactive, computed } from "vue";
export default {
setup() {
const myObject = reactive({
title: "제목",
author: "이채원",
publishedAt: "20202020",
});
return {
myObject,
};
},
};