【vue】vueの条件付きレンダリング【v-if】

条件付きレンダリング

v-if, v-else-if, v-else

どれもすべて他の言語と同じように使える。注意しなければならない点はあくまでタグとして書かれること。

例えば
<div v-if=”sample1″></div>
と書かれていたらこの次の行に
<div v-else-if=”sample2″></div>
と書かないとv-else-ifがかけないこと。v-elseも同様。
また、説明不要かもしれないがこの場合はdivのタグ内だけがレンダリングされる/レンダリングされないの対象になっている。

サンプルコード

See the Pen v-if使い方 by Yishida (@yishida05) on CodePen.

・カウントが3未満
・カウントが3
・カウントが3以上
で条件分けをv-if, v-else-if, v-elseで記述してある。
加えて、methodを条件式に設定するv-ifも記述している。

v-if=”returnTrue”でmethodsのreturnTrueの返り値を見に行っている。

javascriptの真偽値に依存している

v-if=”○○”とはどのような時にtrueになるか？javascriptでは
他の言語と結構違うのでここに。（javaが最初の言語だったので混乱した経験が・・・）
偽：false, 0(数字), null, (空文字), undefined
真：true, 偽以外
真の偽以外とはつまり何かしらが入っていれば真になる。
javaだとif(a == “aiueo”)と書いていたものがjavascript(及びv-if)だとv-if=”a”で済む。もちろんv-if=”a === ‘aiueo'”と記述しても真になる。