Vue.jsのv-bindディレクティブについて説明します。
Contents
v-bindディレクティブとは?
属性のデータバインディング
v-bindとは、属性を対象にデータバインディングするディレクティブのこと。
省略記法
1 |
: |
【例】下記2つは全く同じ。
HTML
1 |
v-bind:value="message" |
1 |
:value="message" |
実装例 – v-bindディレクティブ有無での挙動比較
HTML
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 |
<html> <head> <title>Hello dice-record!!</title> </head> <body> <div id="application"> <h2> <!-- マスタッシュ構文有り|messageは展開される --> {{ message }} </h2> <p> <!-- マスタッシュ構文無し|messageは展開されない --> <input type="text" value="message">(※v-bind:<b>無し</b>) </p> <p> <!-- v-bind有り|messageは展開される --> <input type="text" v-bind:value="message">(※v-bind:<b>有り</b>(一般記法)) </p> <p> <!-- v-bind有り|messageは展開される --> <input type="text" :value="message">(※v-bind:<b>有り</b>(省略記法)) </p> <p> <!-- v-bind無し|urlは展開されない --> <a href="url" target="_blank">ダイス記</a>(※v-bind:<b>無し</b>) </p> <p> <!-- v-bind有り|urlは展開される --> <a v-bind:href="url" target="_blank">ダイス記</a>(※v-bind:<b>有り</b>) </p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="test.js"></script> </body> </html> |
JavaScript
1 2 3 4 5 6 7 |
new Vue({ el: '#application', data: { message: '今後ともダイス記を宜しく!!ヽ(・ω・)/', url: 'https://dice-record.com/vuejs-v-bind/' } }) |
動作お試し
https://jsfiddle.net/dice_record/bq6t9jzL/6/
例からは下記のことが解る。
- 属性(valueやhref)にv-bindディレクティブがかかってると、データバインディングされ、messageやurlの内容が展開されている。
- 属性(valueやhref)にv-bindディレクティブがかかってないとデータバインディングされない(messageはそのままmessageと、urlはそのままurlと文字列で評価されてしまう)。
実装例 – クラスのバインディング
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <body> <div id="app"> <p v-bind:class="errorMessageClass"> {{ message }} </p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="test.js"></script> </body> </html> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 |
new Vue({ el: '#app', data: { message: '今後ともダイス記を宜しく!!ヽ(・ω・)/', }, computed: { errorMessageClass: function() { return { error: !this.canBuy } } } }) |
CSS
1 2 3 4 5 6 7 |
body { background-color : ghostwhite; } .error { background-color: pink; color: blue; } |
動作お試し
https://jsfiddle.net/o2bwu5qy/1/
参照
『Vue.js入門』
Vue.js公式
https://jp.vuejs.org/v2/api/#v-bind
以上です。