Vue.jsのv-ifディレクティブについて説明します。
v-ifディレクティブとは？
条件付きレンダリング
v-ifとは、表示・非表示を切り替えるディレクティブのこと。
- 対象：ブロック
- 切替基準：true時に表示、false時に非表示
下記に一例を示す。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <title>Hello dice-record!!</title> </head> <body> <div id="application"> <p> <!-- 必ず表示 --> <a v-bind:href="url" target="_blank">ダイス記</a> </p> <p v-if="show"> <!-- showの値がtrue時のみ表示 --> <a v-bind:href="url" target="_blank">ダイス記</a> </p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="main.js"></script> </body> </html> |
JavaScript
|
1 2 3 4 5 6 7 8 |
var app = new Vue({ el: '#application', data: { url: 'https://dice-record.com/', // falseにすると2つ目のリンクが非表示 show: true } }) |
役割の類似するディレクティブ【v-show】
共通点と違いについては下記参照
【Vue.js】v-ifとv-showの違い【DOM上の有無】Vue.jsのv-ifディレクティブとv-showディレクティブの共通点と差異について説明します。
v-ifとv-showの共通点
...
公式
以上です。
