vue.jsのv-bindを使ってみる

2021年1月3日

vue.jsのv-bindを使ってみる

括弧の化け物も合間をぬって少しずつ勉強しようと思います。
v-bindは属性値に値をバインドしたい時に使用するそうです。

要素内容にバインドする例

まずはv-bindを使用しない、要素内容に値をバインドする例です。
下記のmessageプロパティ「{{ message }}」には、dataオプションの「プロパティの値」が入ります。

<div id="app">
  <div>{{ message }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="main.js"></script>

dataオプションの「messageプロパティ」の値に「hello vueJS!!」が指定してあるので先ほどの「{{ message }}」の部分が「hello vueJS!!」に置き換わります。

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello vueJS!!'
  }
})

属性にバインドする例

それでは今度はv-bindを使用する例です。

まず下記の通りに記述すると「{{ message }}」がそのまま出力されてしまいます。

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

そこで属性名に「v-bind」を指定します。しかし下記の通りに記述しても「hello vueJS!!」は出力されません。これはムスタッシュと呼ばれる「{{}}」は要素内容にバインドする時のみ使用できるためだそうです。

<input ytpe="text" v-bind:value="{{ message }}">

下記の通り記述することで無事「hello vueJS!!」と出力する事が出来ました。

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