v-for

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

<script>
	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,
			};
		},
	};
</script>

<style></style>

v-for 에는 항상 key 값을 써야함.

조건을 분기시킬 때는 다음과 같이한다.

v-if의 사용법

<template v-for="(item, index) in items" :key="item.id">
	<li v-if="item.id % 2 === 0"> </li
></template>

일단 v-for와 v-if를 같이 사용할 수 없다. 그러므로 template으로 li 태그를 감싸고 template에 v-for를 사용한다.

그 다음 li 태그에 v-if 문을 넘긴다.

혹은 다음과 같이 filter를 걸어서 넘기는 방법이 있다.

const evenItems = computed(() => items.filter(item => item.id % 2 === 0));

위와 같이 아예 배열을 filter를 걸어서 computed 안에 넣어주면 template 에서

<template v-for="(item, index) in items" :key="item.id">
	<li>인덱스 : {{ index }} , {{ item.message }}</li>
</template>

이렇게 사용하면 동일하게 나오는 것을 확인할 수 있다.

배열말고 객체로 선언해서 v-for 사용하기

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

위와 같이 선언한 후

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

이렇게 사용하면 객체 안의 value, key, index 값을 모두 가져올 수 있다.