こんにちは。
野中やすおです。
今回の記事では、v-ifとv-showの使い方とそれぞれの違いについて解説します。v-ifとv-showは、条件付きレンダリングと呼ばれることもあります。
v-ifの使い方
v-ifはVue.jsのディレクティブの1つで、条件をもとに要素の表示を切り替えるために使用されます。
|
1 2 3 4 5 |
<template> <div> <p v-if="condition">条件が真の場合に表示される要素</p> </div> </template> |
上記では、v-ifの条件がtrueの場合に<p>要素が表示されます。
|
1 2 3 4 5 |
<template> <div> <p v-if="condition == 'great'">Greant！</p> </div> </template> |
条件式をつけて上記のような書き方もできます。
v-else、v-else-ifの使い方
v-ifとセットでよく使われるのがv-else、v-else-ifです。これらは、条件をもとに複数の要素の表示を切り替える場合に使用されます。
|
1 2 3 4 5 6 7 |
<template> <div> <p v-if="condition1">条件1が真の場合に表示される要素</p> <p v-else-if="condition2">条件2が真の場合に表示される要素</p> <p v-else>いずれの条件も真ではない場合に表示される要素</p> </div> </template> |
上記では、v-ifの条件がtrueの場合に一番上の<p>要素が表示され、v-else-ifの条件がtrueの場合に真ん中の<p>要素が表示され、いずれの条件も該当しない場合にちは、一番下の<p>要素が表示されるようになります。
|
1 2 3 4 5 6 7 |
<template> <div> <p v-if="condition == 'great'">Great！</p> <p v-else-if="condition == 'good'">Good！</p> <p v-else>Bad！</p> </div> </template> |
こちらも条件式をつけて上記のような書き方もできます。
<template>そのものにv-ifをつける
要素の存在そのものを切り替えるようにする場合には、<template>要素にv-ifを付与することでできるようになります。
|
1 2 3 4 5 6 7 8 |
<template> <div> <template v-if="condition"> <p>条件が真の場合に表示される要素です。</p> <p>条件が真の場合に表示される別の要素です。</p> </template> </div> </template> |
上記の例では、conditionがtrueの場合に、2つの<p>要素が表示されます。一方でconditionがfalseの場合、<p>要素は表示されません。
v-showの使い方
v-showもVue.jsのディレクティブの1つで、v-ifと同様に要素の表示に切り替えるために使用されます。使い方もv-ifとほぼ同じですが、複数要素の場合でもどちらもv-showを使います。
|
1 2 3 4 5 6 |
<template> <div> <p v-show="condition1">条件1が真の場合に表示される要素</p> <p v-show="condition2">条件2が真の場合に表示される要素</p> </div> </template> |
v-ifとv-showの違い
ほぼ使い方が似ているv-ifとv-showですが、その違いは、要素がDOMに残るかどうかです。
v-ifは、要素の表示を切り替えるため、非表示になった場合は、DOMから完全に削除されます。一方でv-showの要素は、常にレンダリングされて DOMに残り続けます。つまりv-ifを使用した場合は、v-showと比べてリソースを節約することができます。
v-ifとv-showとの使い分け
v-ifを使用する場合は、「表示の切り替えが頻繁に行われない場合」に使用し、v-showを使用する場合は、「表示の切り替えが頻繁に行う」に使用することが望ましいです。
注意事項
v-ifとv-showを一緒に使うことは公式で推奨されていません。またv-if と v-for が同じ要素に両方つかわれる場合、 v-if が先に評価されます。
参考
Vue.js - The Progressive JavaScript Framework…
