Vue.js imgタグのsrc属性にデータバインディングのやり方

Vue.js imgタグのsrc属性にデータバインディングのやり方

vue.jsで属性に対してデータバインディングを行うためのやり方を記述してます。v-bindを使うと実現可能です。

環境

  • OS  CentOS 8.0.1905 (Core)
  • node v12.13.1
  • npm 6.13.2
  • @vue/cli 4.1.1

マスタッシュ構文

通常だとマスタッシュ構文を利用すればデータバインディング は行えますが、属性に対して、そのまま実行するとエラーになります。

v-bindを使う

v-bindを利用すれば、属性へのデータバインディングは可能になります。

省略も可能です。