Vueと共通

【Nuxt.js】Nuxt文法編:v-if, v-else, v-else-if

前置き

今までの記事で
何度も使ってきたv-if
記事ごとに解説はしていましたが
v-if自体の記事はない😨💦
ということが、ちらほら。。。
そこで文法の記事を投稿していきます🐥💕
今後v-forやv-modelなどを
更新していくのでお楽しみに♪

どんな時に使うの?

表示/非表示の切り替えに使います!
buttonをclickしてモーダルなどの
表示/非表示を切り替えたりします。
#【Nuxt.js】$emit実践編:モーダルウィンドウ を操作しよう


v-if

ディレクティブの式が
真の時のみブロックが描写されます!
単一の要素にv-ifをつけます。

普通の使い方

表示

true

h1タグが描写されます

false

h1タグが描写されません

真偽値を逆にした使い方

!を使って
真偽値を逆にすることができます!

複数の要素を切り替える使い方

親要素にv-ifをつけてあげます🌟

表示



v-else

v-if="true":v-ifのみ描写
v-if="false":v-elseのみ描写

v-ifとセットで使います!
v-elseはv-ifもしくはv-else-ifの
直後に書きましょう!
それ以外は認識されません👀💦

普通の使い方

v-ifに関数を入れた使い方

・Math.random()
 0〜1の数字をランダムで作り
 0.5「より」上ならv-ifがtrueとなります。
 「より」なので0.5は含みません。
・{{ Math.random() }}
 Mustache構文(二重中括弧)
 数字を確認したいので
 表示させておきます👀

表示

true

false



v-else-if

v-ifとセットで使います!
複数の条件を指定したい時に使います🌟
こちらもv-ifもしくはv-else-ifの
直後に書きましょう!

普通の使い方

表示

type: 'E'は
v-else-ifのどれにも当てはまらないため
「ABCどれにも当てはまりません」
が表示されます!


要素の再利用と制御

効率的に描写するために
要素を再利用することがよくあります。
例えばこちらのコード。
v-ifとv-elseでinputを分けています🌟
toggleボタンでinputを切り替えます🍒

再利用可能な要素

表示

toggleを押しても
inputに入力したものが残ってます。
切り替えができていません。
placeholderは変わっていますが、
input自体が再利用されています🤔
この場合の再利用は
望ましくありません💡

keyによる再利用可能な要素の制御

そこでkey属性の出番!
Vueで使える特別な属性のことです🌸
これを追加することで
「別物だよ!再利用しないでね!」
と伝えることができます🤗

表示

inputが最初から
描写されていますね✨👀

注意

inputはkey属性を持ちますが
labelにはないため
labelは再描写されています!


まとめ

  • 1つの要素を表示/非表示する場合はv-if
  • 2つの要素で切り替える場合はv-if, v-else
  • 3つ以上の要素ならv-if, v-else-if, v-else

-Vueと共通
-,

© 2020 aLiz Nuxt