【Vue.js】Vue.jsメモ（v-bind:属性バインディング）

今回は「属性バインディング」について。

マスタッシュ記法（{{ }}）はテキストのバインディングに使用するためのものであり、属性に対して使用することはできない。

<!-- これはエラー -->
<input type="text" value="{{ message }}" >

属性に対するバインディングはv-bind ディレクティブを用いる。
v-bind の構文はv-bind:[属性]="プロパティ" となる。

<input type="text" v-bind:value="message">

また、v-bind: は:と省略することも可能。

<input type="text" :value="message">

クラス、スタイルに対するバインド

v-bind を用いてクラス・スタイルにバインドする場合、クラス名やCSSプロパティとしてバインドされる。

クラスにバインドする場合、v-bind:class="{クラス名 : 条件式, ... }" の形式で記載する。
- 条件式がtrueの場合に、クラスが適用される。
- クラス名に - を含む場合には、' で囲う必要がある。（原則'で囲う方が良さそう）
スタイルにバインドする場合、v-bind:style="{CSSプロパティ名 : 値, ...}" の形式で記載する。
- CSSプロパティ名は、クラスとは違ってキャメルケースで書ける。
  - background-color => backgroundColor

<div id="app">
    <p v-bind:class="{'class-name': isClassName}">Apple</p>
    <p v-bind:style="{backgroundColor: bgcolor}">Orange</p>
</div>

new Vue({
    el: '#app',
    data: {
        isClassName: true,
        bgcolor: 'red'
    }
})

上記のコードは以下のようにレンダリングされる。

<div id="app">
    <p class="class-name">Apple</p>
    <p style="background-color: red;">Orange</p>
</div>

また、{}の中に複数のクラス・スタイルを列挙することが可能であるが、数が多くなってくると冗長になってしまう。
その場合、オブジェクトを渡すことでスッキリ書ける。

<div id="app">
    <p v-bind:style="styleObject">Orange</p>
</div>

new Vue({
    el: '#app',
    data: {
        styleObject: {
            color: 'red',
            backgroundColor: 'blue'
        }
    }
})

<div id="app">
    <p style="color: red; background-color: blue;">Orange</p>
</div>