Vueを使っている際に、HTML要素の様々な属性、例えばaタグのhref属性などを動的に変えたい時があると思います。そのような場面で便利なVueのv-bindディレクティブについて解説します。

Vueのv-bindディレクティブとは？

Vueでアプリケーション作成をする際にaタグのhref属性やimgタグのsrc属性なども動的に変更したい！という場面があったりすると思います。そんな時に使えるのがVueのv-bindディレクティブです。例えばボタンによってimgタグのsrc属性を切り替えて表示される画像を動的に切り替える…などの場面で使用します。

v-bindディレクティブを用いれば動的に切り替えたい属性に切り替えるための変数を紐づけしておくだけでこれらを実現してくれます。

Vueのv-bindディレクティブの使い方

それでは実際のv-bindディレクティブの書き方について説明していきます。

Vueのv-bindディレクティブの書き方

v-bindディレクティブは次のように書きます。

(app.js)

new Vue({
 el: "#app",
 data: {
   属性に代入される変数名: 変数の初期値,
 },
 template: `
 <div>
   <img v-bind:属性の名前="属性に代入される変数名"/>
 </div>
 `
})

省略記法

v-bindディレクティブの書き方は省略して書くこともできます。

（index.html）

<img v-bind:属性の名前="属性に代入される変数名"/><img :属性の名前="属性に代入される変数名"/>

上記のようにv-bindの部分を省略しても構いません。積極的に使っていきましょう。ただし、サイト内で省略記法の仕様の有無を統一することはコードの可読性を高める上で重要です。

Vueのv-bindディレクティブの実装例

ボタンを押すと写真が切り替わる機能を作ってみましょう。imgタグのsrc属性を変更することで画像も動的に切り替わります。

（app.js）

new Vue({
 el: "#app",
 data: {
   imgUrl: "http://urx.red/gJWM",
 },
 template: `
 <div>
   <div>
       <button
       v-on:click="imgUrl = 'http://urx.red/gJWM'"
       >dog</button>
       <button
       v-on:click="imgUrl = 'http://urx.red/PBTv'"
       >cat</button>
   </div>
   <img v-bind:src="imgUrl"/>
 </div>
 `
})

(index.html)

<div id="app"></div>

このようにv-bindを用いてimgタグのsrc属性に変数imgUrlを紐づけました。さらにボタンを押すことで、imgUrlに異なる画像のリンクが代入されます。同時にimgタグのsrcも切り替わるため画面の表示も切り替わります。

（実際の表示）

class属性やstyle属性を紐付ける

v-bindディレクティブではclass属性やstyle属性を紐づけることもできますが複数のclassやstyleの値を代入するケースが多いため、Vueでは文字列の変数ではなく、配列やオブジェクトでこれらの属性を指定することができます。これらについては「Vueのv-bind:classの使い方について解説」でも解説していますので確認してみてください。

v-bind:classの書き方

クラスをv-bindディレクティブで紐付けする際は次のように記述します。

<div v-bind:class ="{クラス名:プロパティ値}">AAA</div>

クラス名をキーにした真偽値をプロパティ値にして指定します。プロパティ値がtrueの時にはキーのクラスが適用されます。反対にfalseの時は適用されません。例として赤字と黒字が切り替わるinput要素を作ってみましょう。

(index.html)

<div id="app">
    エラーがある場合は赤字に表示
    <input v-bind:class="{ 'red-text': hasError}" />
</div>

(app.js)

new Vue({
   el: "#app",
   data: {
       hasError: true
   }
})

(style.css)

.red-text{
   color: red;
}

このように記述されている時、hasErrorがtrueであるため、index.htmlファイルのinput要素にはred-textクラスが適用されます。したがって、出力は次のようになります。

（出力結果）

（描画されるHTML要素・GoogleChrome）

一方で、hasErrorがfalseである時はred-textクラスが適用されません

(app.js)

new Vue({
   el: "#app",
   data: {
       hasError: false
   }
})

したがって、出力は次のようになります。

（出力結果）

（描画されるHTML・GoogleChrome）

v-bind:classでは他にも配列でclassを指定する方法やオブジェクトをdataプロパティや算出プロパティにバインディングさせる方法があります。これらについてより詳しく学習したい方は「Vueのv-bind:classの書き方・使い方について解説」を参照してみましょう。

v-bind:styleの書き方

style属性をv-bindディレクティブで紐付けする際は次のように記述します。オブジェクト記法での書き方はクラスのバインディングと似ています。

（index.html）

<div v-bind:class ="{CSSプロパティ名:値}">AAA</div>

CSSプロパティ名をキーに指定して、その値をオブジェクトのように記述します。3.1項と同様に例として赤字と黒字が切り替わるinput要素を作ってみましょう。

(index.html)

<div id="app">
    エラーがある場合は赤字に表示
    <input v-bind:style="{ color: textColor}" />
</div>

(app.js)

new Vue({
   el: "#app",
   data: {
       textColor: 'black'
   }
})

このように記述されている時、textColorが’black’に指定されているため、input要素のcolorは’black’に指定されます。したがって出力は次のようになります。

（出力結果）

（描画されるHTML・GoogleChrome）

一方で、textColorが’red’に指定されている時は、input要素のcolorは’red’になります。

(app.js)

new Vue({
   el: "#app",
   data: {
       textColor: 'red'
   }
})

したがって、出力は次のようになります。

（出力結果）

（描画されるHTML・GoogleChrome）

糖衣構文v-modelの書き方

HTMLのinput要素やselect要素などのユーザーの入力によってvlaue属性が変化する要素をVueで取得しようとした際、v-bindディレクティブを用いることで実現します。

(index.html)

<div id="app">
   名前をここに入力する
    <input  v-bind:value="name"  v-on:change="name = $event.target.value" />
</div>

(app.js)

new Vue({
   el: "#app",
   data: {
       name: ''
   }
})

このようにv-onディレクティブでinput要素の入力値が変更された際に変数nameにinput要素のvalueを代入し、反対に変数nameが変更される場合にはv-bindディレクティブでinput要素のvalue属性に変数nameの値を代入させています。このようにして双方向のデータバインディングを実現することができます。

このような双方向のデータバインディングのための糖衣構文（記法を簡略なものにした構文）としてVueはv-modelを提供しています。v-modelディレクティブを用いることで先ほどのコードと全く同じ機能を次のようにして実現できます。

(index.html)

<div id="app">
   名前をここに入力する
    <input v-model="name"/>
</div>

v-bindディレクティブとv-onディレクティブをまとめてv-modelディレクティブで実現できます。しかし、v-modelは必ずしも万能なディレクティブではなく、双方向のデータバインディングがコンポーネントをまたぐ場合（例えば子コンポーネントのinput要素と親要素の変数をひもづける場合）は使えないなどの制限があります。したがって、v-bindディレクティブとv-onディレクティブを用いた双方向データバインディングをマスターしておいたほうがいいでしょう！

さらに詳しく学習してみたい方は「Vueのv-modelディレクティブの書き方・使い方について解説」を参照してみてください！

この記事のまとめ

本記事ではVueのv-bindディレクティブを、実際の実装例を元に説明しました！最後に記事の要点をまとめてみましょう。

• HTML要素の任意の属性はv-bindディレクティブを用いることで動的に紐付けすることができる。
• v-bindは「:」のみを用いる省略記法がある。
• v-bind:classとv-bind:styleについてVueは特別な記法を用意している。
• input要素のvalue属性を紐付ける場合はv-modelを用いると便利である。

Vueのv-bindディレクティブを是非活用してみましょう！