条件付きレンダリング

概要

v-if

要素を条件付きでレンダリングしたいときはv-ifディレクティブを使用することができる。

<h1 v-if="awesome">Vue is awesome!</h1>

このv-ifはawesomeの値がtrueの場合のみレンダリングされる。もしawesomeがfalseになると<h1>はDOMから削除される。

v-else

他のの条件分岐を作成する際には、v-elseやv-else-ifを使用できる。

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no!</h1>

トグル

refを使用してトグルする。

<script setup>
	import { ref } from 'vue'
	
	const awesome = ref(true)
	
	function toggle() {
		awesome.value = !awesome.value
	}
</script>
 
<template>
	<button @click="toggle">toggle</button>
	<h1 v-if="awesome">Vue is awesome!</h1>
	<h1 v-else>Oh no 😢</h1>
</template>