v-if・v-showで要素を表示・非表示にする [違い][Vue.js]

2019年5月7日

v-showディレクティブおよびv-ifディレクティブを利用すると、条件分岐により要素の表示・非表示の切り替えをおこなうことができます。

 

 

v-showとv-ifの違い


 

 

下記は実際にボタンをクリックすることによる要素が変化する様子です。「v-show」は、スタイルとして「display: none」プロパティが付与されて非表示の状態となります。一方「v-if」はDOM要素自体が削除されていることが確認できます。

 

 

 

↓ ボタンをクリックして要素を非表示にする

 

 

 

 

templateを利用して1つ以上の要素の表示・非表示を制御しています。ただしtemplateに対してv-showは利用できません

 

 

 

v-else、v-else-ifによる条件分岐


 

v-ifディレクティブに対して、v-else-ifディレクティブおよびv-elseディレクティブで条件分岐をおこなうこともできます。

 

 

 

またv-showまたはv-ifによるtransition機能を利用したアニメーションについては、下記ページもご覧下さい。

transitionによるアニメーションの基礎を学ぶ

 

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー