조건/반복 렌더링

<script>
const type = ref() 
<div v-if="type === 'true'">
  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>
TypeScript
복사

v-show

설명

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

Type

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

v-for

설명

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

Type

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

사용법

객체에 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>
HTML
복사

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

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

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

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

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

<script setup>
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
</script>
<template>
	<ul>
	  <template v-for="item in items">
	    <li>{{ item.message }}</li>
	    <li class="divider" role="presentation"></li>
	  </template>
	</ul>
</template>
HTML
복사

우선순위

•

v-if > v-for

•

따라서 서로 같이 쓰는걸 권장하지 않음

v-if & v-show

•

일반적으로 v-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높음.

•

사용하는 경우 

◦

v-show : 매우 자주 전환해야 하는 경우

◦

v-if : 실행 중에 조건이 변경되지 않는 경우