조건/반복 렌더링

v-if ~ v-else-if ~ v-else

설명

🔖 조건부로 블록을 렌더링하는 데 사용 - true일 때만 렌더링

Type

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  A/B/C 아님
</div>

v-show

설명

🔖 항상 렌더링되고 DOM에 남아 있다, CSS 속성만 전환

Type

<h1 v-show="ok">안녕!</h1>

v-for

설명

🔖 배열을 리스트로 렌더링 item in items

Type

<script setup>
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
</script>

<template>
	<ul>
	  <li v-for="value in myObject">
	    {{ value }}
	  </li>
	</ul>
</template>

사용법

객체에 v-for 사용하기

<script setup>
const myObject = reactive({
  title: 'Vue에서 목록을 작성하는 방법',
  author: '홍길동',
  publishedAt: '2016-04-10'
})
</script>

<template>
	<ul>
	  <li v-for="value in myObject">
	    {{ value }}
	  </li>
	</ul>
</template>

숫자 범위에 v-for 사용하기

1...n 범위를 기준으로 템플릿을 여러 번 반복

<span v-for="n in 10">{{ n }}</span> <!-- 1부터 10까지 -->

<template>에서 v-for 사용하기

여러 엘리먼트 블록을 렌더링

<template>
	<ul>
	  <template v-for="item in items">
	    <li>{{ item.msg }}</li>
	    <li class="divider" role="presentation"></li>
	  </template>
	</ul>
</template>

우선순위

• v-if > v-for
• 따라서 서로 같이 쓰는걸 권장하지 않음

v-if & v-show

• 일반적으로 v-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높음.
• 사용하는 경우
  • v-show : 매우 자주 전환해야 하는 경우
  • v-if : 실행 중에 조건이 변경되지 않는 경우