v-showディレクティブおよびv-ifディレクティブを利用すると、条件分岐により要素の表示・非表示の切り替えをおこなうことができます。
v-showとv-ifの違い
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <p v-show="show">v-showで分岐</p> <p v-if="show">v-ifで分岐</p> <button @click="click">ボタン</button> </div> <script> new Vue({ el: '#app', data: { show: true }, methods: { click: function () { this.show = !this.show } } }); </script> </body> </html> |
下記は実際にボタンをクリックすることによる要素が変化する様子です。「v-show」は、スタイルとして「display: none」プロパティが付与されて非表示の状態となります。一方「v-if」はDOM要素自体が削除されていることが確認できます。
↓ ボタンをクリックして要素を非表示にする
templateを利用して1つ以上の要素の表示・非表示を制御しています。ただしtemplateに対してv-showは利用できません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="app"> <template v-show="show"> <p>v-show</p> <p>非表示にはならない</p> </template> <template v-if="show"> <p>v-if</p> <p>非表示になる</p> </template> <button @click="click">ボタン</button> </div> |
v-else、v-else-ifによる条件分岐
v-ifディレクティブに対して、v-else-ifディレクティブおよびv-elseディレクティブで条件分岐をおこなうこともできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{count}}</p> <p v-if="count < 3">3より小さい</p> <p v-else-if="count > 3">3より大きい</p> <p v-else>ちょうど3</p> <button @click="click">+</button> </div> <script> new Vue({ el: '#app', data: { count: 0 }, methods: { click: function () { this.count += 1 } } }); </script> </body> </html> |
またv-showまたはv-ifによるtransition機能を利用したアニメーションについては、下記ページもご覧下さい。
