v-if/v-showの違いと注意事項

date

Mar 10, 2023

repo_url

slug

vif-vshow

status

Published

summary

type

Post

thumbnail_url

tags

vue

outer_link

v-show：常にレンダリングされる。（style=”display:none”で非表示になる）

v-if：条件に合致したときだけレンダリングされる。

よって、

v-showは表示・非表示が頻繁に切り替わるような処理に適している。

v-ifは表示・非表示があらかじめ決まっていて切り替えが不要な処理に適している。

<template>
	<section>
		v-ifを利用
		<p v-if="showOrNot">
			条件に合致したので表示
		</p>
	</section>
	<section>
		v-showを利用
		<p v-show="showOrNot">
			条件に合致したので表示
		</p>
	</section>
</template>

↓showOrNotがfalseの場合

<section>
	v-ifを利用
</section>
<section>
	v-showを利用
	<p style="display:none">
		条件に合致したので表示
	</p>
</section>

templateタグではv-showは使用できない

v-showは常にレンダリングされるため、templateタグには利用できない。