[Vue.js]v-bindディレクティブの書き方

Vue.jsのv-bindディレクティブの書き方についてのまとめ。

v-bindディレクティブとは

マスタッシュを使えば、文字列などを動的に変更することができます。

<div id="app">
    {{ message }}
</div>

new Vue({
    el: '#app',
    data: {
      message: 'hello world!'
    }
  })

しかし、マスタッシュではhtml内部の値を動的に変更することができません。

つまり、<div id={{ hoge }}>のような使い方はできません。

• クラスやidを変更して文字色の装飾を変更する
• srcを変更して画像を動的に切り替える

こうしたことはマスタッシュでは実現できません。

ここで出てくるのかv-bindディレクティブというわけです。

v-bindディレクティブの基本形

<div v-bind:属性名="変数名">

<div v-bind:title="hoge">
<img v-bind:src="hoge">

属性名は様々でclassなどもあります。

なお、以下のようにv-bindを省略して記述することもできます。

<div :属性名="変数名">