本記事では、Vue.jsのv-showディレクティブについて紹介します。
目次
v-showディレクティブ
Webアプリケーションでは、データの状態やユーザーの操作によってHTMLの特定の要素を表示したり非表示にしたりすることで、動的なページを表現することがよくあります。
そのような要素の表示・非表示を切り替えるためにVue.jsには、V-showディレクティブが用意されています。
v-showディレクティブを使用すると、データの状態や式の結果によって任意の要素の表示状態を切り替えることができます。
v-showディレクティブの書式
v-showディレクティブは以下の書式で使用します。
|
1 |
<要素名 v-show="値または式" /> |
「値または式」には、trueまたはfalseの真偽値で表されるboolean型となる値または式を指定します。
値にはdataオプションに定義したプロパティや、computedオプションに定義したプロパティを指定します。
式にはmethodsオプションに定義したプロパティを「プロパティ名()」の関数呼び出し形式で指定します。また、HTMLテンプレートに直接式を指定することもできます。例えばdataオプションにvalueというプロパティが定義されており、valueが「1」かどうかを式に指定する場合は「value === 1」という式になります。
v-showディレクティブの動作
v-showディレクティブは、HTML要素の表示・非表示をCSSのdisplayプロパティを変更することで実現しています。
v-showディレクティブに指定する値または式の値が「falsy」（false, 0, -0, ”, null, undefined, NaNのいずれか）であれば「style=”display: none;”」が要素に付与されます。その逆に「truthy」であれば「style=”display: none;”」が要素から削除されます。
v-showの指定がfalseの場合
v-showの指定（false）
|
1 2 3 |
<div id="app"> <div v-show="false"></div> </div> |
出力されるHTML
|
1 2 3 |
<div id="app"> <div style="display: none;"></div> </div> |
v-showの指定がtrueの場合
v-showの指定（true）
|
1 2 3 |
<div id="app"> <div v-show="true"></div> </div> |
出力されるHTML
|
1 2 3 |
<div id="app"> <div></div> </div> |
v-showディレクティブの使用例
ここではv-showディレクティブを使用して、HTML要素の表示状態（表示と非表示）を切り替える例をいくつか示します。
dataオプションに定義した値（プロパティ）を指定する
dataオプションに定義したプロパティを使ってHTMLテンプレートのdiv要素にv-showディレクティブを適用する例を示します。
JavaScript
|
1 2 3 4 5 6 7 |
Vue.createApp({ data: function() { return { isVisible: true } } }).mount('#app') |
HTML
|
1 2 3 4 |
<div id="app"> <div v-show="isVisible">v-showで表示／表示</div> <button v-on:click="isVisible = !isVisible">ボタン</button> </div> |
上記の例では、dataオプションのisVisibleプロパティの値によって、div要素の表示状態を設定しています。ボタンをクリックするとisVisibleのプロパティの値（true/false）が切り替わります。
computedオプションに定義した値（プロパティ）を指定する
computedオプションに定義したプロパティを使ってHTMLテンプレートのbutton要素にv-showディレクティブを適用する例を示します。
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Vue.createApp({ data: function() { return { value: '' } }, computed: { isVisible: function() { return this.value !== ''; } } }).mount('#app') |
HTML
|
1 2 3 4 5 6 |
<div id="app"> <div> <input v-model="value" /> </div> <button v-show="isVisible">送信</button> </div> |
上記の例では、computedオプションのisVisibleプロパティの値によって、button要素の表示状態を設定しています。テキストボックスに値が入力されているかどうかでisVisibleのプロパティの値（true/false）が切り替わります。
methodsオプションのメソッドを指定する
methodsオプションに定義したメソッドを使ってHTMLテンプレートのbutton要素にv-showディレクティブを適用する例を示します。
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Vue.createApp({ data: function() { return { value: '' } }, methods: { isVisible: function() { return this.value !== ''; } } }).mount('#app') |
HTML
|
1 2 3 4 5 6 7 |
<div id="app"> <div> <input v-model="value" v-on:change="isVisible" /> </div> <button v-show="isVisible()">送信</button> </div> |
上記の例では、methodsオプションのisVisibleメソッドの値によって、button要素の表示状態を設定しています。テキストボックスに値が入力されているかどうかでisVisibleのプロパティの値（true/false）が切り替わります。
式を指定する
HTMLテンプレートの直積式を記述してbutton要素にv-showディレクティブを適用する例を示します。
JavaScript
|
1 2 3 4 5 6 7 |
Vue.createApp({ data: function() { return { value: '' } } }).mount('#app') |
HTML
|
1 2 3 4 5 6 |
<div id="app"> <div> <input v-model="value" /> </div> <button v-show="value !== ''">送信</button> </div> |
上記の例では、methodsオプションのisVisibleメソッドの値によって、button要素の表示状態を設定しています。テキストボックスに値が入力されているかどうかでisVisibleのプロパティの値（true/false）が切り替わります。
