【Vue.js】マスタッシュ構文が使えないHTML属性の内部でデータバインディングを行うには

Vue.jsでの最も基本的なデータバインディングの形は二重中括弧 {{}} を利用したテキスト展開である。
これはマスタッシュ(Mustache)構文と呼ばれる。

<p>{{ msg }}</p>

だがこれは、HTML属性内部で使用することができない。

<!-- 以下のようなことは不可 -->
<img src="{{ src }}">
<a href="{{ url }}"></a>

なので、この場合は v-bind ディレクティブを使う。

<!-- v-bind:attr="variable" という形で使う -->
<img v-bind:src="src">
<a v-bind:href="url"></a>

なお、v-bind は省略記法が用意されている。

<!-- v-bind は省略可 -->
<img :src="src">
<a :href="url"></a>

jp.vuejs.org