【Vue.js】Vue.jsメモ(v-if, v-show:条件分岐)
今回はv-if
、v-show
について。
どちらも条件分岐に使用するディレクティブで、式の結果が true
の場合のみレンダリングを行う。
- 作者: mio
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/05/29
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
基本構文
v-if
、v-show
に続けて、条件式を記載します。
今回は、プロパティ isEnable
が true
の場合のみ div
タグを表示するようにします。
<div id="app"> <div v-if="isEnable">v-if</div> <div v-show="isEnable">v-show</div> </div>
var app = new Vue({ el: '#app', data: { isEnable: true } })
上記コードのレンダリング結果は以下の通り。
<div id="app"> <div>v-if</div> <div>v-show</div> </div>
v-if
と v-show
の違い
ここまでは v-if
も v-show
も特に違いが無いように見える。
次に、isEnable
を false
に変更して結果を見てみる。
var app = new Vue({ el: '#app', data: { isEnable: false } })
レンダリング結果は以下の通り。
<div id="app"> <!----> <div style="display: none;">v-show</div> </div>
v-if
を使用した div
の方は、コメントアウトされた。
一方 v-show
を使用した div
の方は、style="display: none;"
が付加された。
見て分かる通り、v-if
を利用すると条件式がfalseの場合に、自身の要素はDOM上から削除されてしまう。
v-show
の方は、スタイルを適用して画面に表示されていないだけで、DOM上には存在している。
v-if
と v-show
の使い分けについては
v-if
- ある特定条件下でないとエラーになる場合
- 子要素に、ディレクティブを多用している場合。
- レンダリング頻度が少ない。
v-show
v-if
とは逆の条件に当てはまる場合。