v-if

v-if 를 사용하여 분기 처리를 할 수 있다.

<template>
	<div>
		<h2 v-if="visible">Hello Vue3!</h2>
		<h2 v-else>false 입니다!</h2>
		<button v-on:click="visible = !visible">toggle</button>

		<hr />
		<button v-on:click="type = 'A'">A</button>
		<button v-on:click="type = 'B'">B</button>
		<button v-on:click="type = 'C'">C</button>
		<button v-on:click="type = 'D'">D</button>
		<h2 v-if="type === 'A'">A입니다.</h2>
		<h2 v-else-if="type === 'B'">B입니다.</h2>
		<h2 v-else-if="type === 'C'">C입니다.</h2>
		<h2 v-else>A, B, C가 아닙니다.</h2>
	</div>
</template>

<script>
import { ref } from 'vue';
export default {
	setup() {
		const visible = ref(true);

		const type = ref('A');
		return { visible, type };
	},
};
</script>

<style></style>

v-if로 분기를 해서 조건에 맞게 렌더링하는 코드를 위와 같이 작성할 수 있다.

여러개의 html 요소를 연결하고 싶다면

templaate을 사용할 수 있다.

<template v-if="visible">
			<h1>Title</h1>
			<p>Paragraph 1</p>
			<p>Paragraph 2</p>
</template>

위와 같이 template으로 묶어주는 느낌.

v-show

<h1 v-show="ok">Title 입니다.</h1>
<button v-on:click="ok = !ok">ok</button>

위와 같이 사용하는 것은 display:none 기법으로 숨기고 보여주고를 구현하는 것임.

v-if는 제거되고 생성되는 느낌임. 초기에 조건이 맞지 않으면 렌더링 되지 않다가 조건이 참이 되면 렌더링 됨.

v-show 는 일단 렌더링 되었다가 조건이 참이면 보여주고 거짓이면 숨김.

그러므로 v-if는 전환 비용이 높으나 초기 렌더링 비용은 낮음 v-show는 전환 비용은 낮으나 초기 렌더링 비용이 높음

조건이 자주 변경된다면 v-show 자주 변경되지 않는다면 v-if

• v-if 와 v-for는 같이 쓰지 않는다. template으로 구분해서 사용할 것 이전 강의 자료 참조.