vue.js tips - v-bind を使って属性をデータバインディングする方法

phi phi on vue.js

vue.js で, 属性をデータバインディングする方法を紹介します.

Runstant Demo

とりあえずデモです.

image の内容が展開されて img の src 属性にセットされているのがわかるかと思います.

v-attr は廃止されました

v-attr は, vue.js 1.0 ~ で廃止されました. 未だにググるとこれを使った方法がヒットしますが使えないのでお気をつけください.

代わりに v-bind 使います

v-bind を使います.

<img v-bind:src='image' />  

こうすると下記のように展開されます.

<img src='image変数の中身' />  

ちなみに v-bind は省略可能です.

<img :src='image' />  

Reference