【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>