v-bindとは？
タグの属性にVue.jsのデータを挿入する事ができるディレクティブです。
基本的な使い方
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="app"> <a :href="urlTwitter" :id="number">Twitter</a> </div> <script> new Vue({ el: "#app", data: { urlTwitter: 'https://twitter.com/login?lang=ja', number: 5 } }) |
複数の属性値を並べる場合
複数の属性値を並べる場合は下記のようにオブジェクトとしてまとめて定義する事が可能です。
|
1 |
<a v-bind="{href: urlTwitter, id: number}">Twitter</a> |
下記のようにオブジェクトをdata側に挿入して記述することも可能になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div id="app"> <a v-bind="obj">Twitter</a> </div> <script> new Vue({ el: "#app", data: { obj: { href: 'https://twitter.com/login?lang=ja', id: 5 } } }) </script> |
cssを適用する場合
複数のCSSプロパティを適用する場合はオブジェクト形式でキーをプロパティ名にしてtrue/falseで適用非適用を制御する事が可能です。独特なv-bindの書き方の一つでありよく使うので覚えておくと良いでしょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id="app"> <p :class="{'red':true,'yellow':true}">Hello World</p> </div> <script> new Vue({ el: "#app", data: { } }) </script> <style> .red { color: #ff0000; } .yellow { background-color: #ffff00; } </style> |
また、あまりオブジェクトが長くなるようであればcomputedにオブジェクトを返すような処理(returnさせる)を記述するようにしましょう。
全て適用させる場合
下記のようにオブジェクトではなく配列で表現することも可能です。その場合は全てtrue（プロパティを表示する）になります。
|
1 |
<p :class="['red','yellow']">Hello World</p> |
部分的に制御したい場合
一部のプロパティは固定(true)、一部は制御したいというような場合は下記のように配列とオブジェクトを組み合わせて記述すれば実装する事が可能です。
|
1 |
<p :class="[{'red':false},'yellow']">Hello World</p> |
この記事へのコメントはありません。