はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【Vue.js】属性のデータバインディングをする方法

はじめに

今回は属性のデータバインディングをする方法についての記事になります!

テキストのバインディングといえば以下のようなコードですよね。

{{ message }}

ただ当然ではありますが、これを属性に使うことはできません。

<input type="text" value="{{ message }}">

この属性のデータバインディングの方法をなぜかいつも覚えられないので、備忘録としての意味合いも込めて残しておきたいと思います。

やり方

<input type="text" v-bind:value="message">

これの省略バージョンもあります。

<input type="text" :value="message">

さいごに

省略バージョンはとてもシンプルなのですが、やっぱり私みたいな初心者はどういう意味だっけ?とよくなってしまいます。

慣れるしかないですね・・・。