【Vue 2】条件付きレンダリング
Vue 2
2021/04/27
v-if
基本構文
v-ifは、条件（Boolean）を与えることで要素の表示、非表示を制御することができます。
HTML
<p v-if="condition1">Hello Tanaka!</p>
<p v-if="condition2">Hello Suzuki!</p>JavaScript
data: {
condition1: true,
condition2: false
}Hello Tanaka!
v-else
v-elseは、v-ifの条件を満たさない場合に表示する要素を指定します。
HTML
<p v-if="condition">Hello Tanaka!</p>
<p v-else">Hello Suzuki!</p>JavaScript
data: {
condition: false,
}Hello Suzuki!
v-else-if
v-else-ifは、複数の条件を基に要素の表示制御を行う場合に使用します。
HTML
<p v-if="code === 1">Hello Tanaka!</p>
<p v-else-if="code === 2">Hello Yamada!</p>
<p v-else">Hello Suzuki!</p>JavaScript
data: {
code: 2
}Hello Yamada!
template によるグループ化
複数の要素の表示制御を行いたい場合は、以下のように<template>を使用します。
<template>は、要素として展開されることはありません。
HTML
<template v-if="condition">
<p>Name: Tanaka</p>
<p>Age: 25</p>
<p>Gender: Male</p>
</template>
<template v-else>
<p>Name: Suzuki</p>
<p>Age: 24</p>
<p>Gender: Female</p>
</template>v-show
v-showは、v-ifと同じく条件（Boolean）を与えることで要素の表示、非表示を制御することができます。
HTML
<p v-show="condition1">Hello Tanaka!</p>
<p v-show="condition2">Hello Suzuki!</p>JavaScript
data: {
condition1: true,
condition2: false
}Hello Tanaka!
v-if と v-show の違い
v-ifは、DOM 操作によって対象の要素を削除したり、追加したりすることで表示制御を行っています。
一方v-showは、CSS のdisplayプロパティによって表示制御を行っています。
つまり、v-showを指定した要素は条件に限らず DOM に展開されます。
初期表示の観点では、不要な DOM 展開が行われないv-ifを使用するのがベターです。
表示、非表示が頻繁に切り替わるような要素に対しては、表示コストのかからないv-showを使用するのがベターです。
