【Vue.js】v-bind【属性のデータバインディング】

Vue.jsのv-bindディレクティブについて説明します。

Contents

v-bindディレクティブとは？
参照
- 『Vue.js入門』
- Vue.js公式

v-bindディレクティブとは？

属性のデータバインディング

v-bindとは、属性を対象にデータバインディングするディレクティブのこと。

ここで言う「属性」とは、ヒトHTMLの属性を指す。一例としては、valueやhref、list等が挙げられる。

実装例のコード見つつ、下の方のJSFiddleの動くものを見るのが手っ取り早くてお勧め。

省略記法

:

v-bind と記述せず : と記述するだけで使える。

【例】下記2つは全く同じ。

HTML

v-bind:value="message"

1	v-bind:value="message"

:value="message"

1	:value="message"

実装例 – v-bindディレクティブ有無での挙動比較

HTML

<html>

<head>
  <title>Hello dice-record!!</title>
</head>

<body>
  <div id="application">
    <h2>
      <!-- マスタッシュ構文有り｜messageは展開される -->
      {{ message }}
    </h2>
    <p>
      <!-- マスタッシュ構文無し｜messageは展開されない -->
      <input type="text" value="message">(※v-bind:<b>無し</b>)
    </p>
    <p>
      <!-- v-bind有り｜messageは展開される -->
      <input type="text" v-bind:value="message">(※v-bind:<b>有り</b>(一般記法))
    </p>
    <p>
      <!-- v-bind有り｜messageは展開される -->
      <input type="text" :value="message">(※v-bind:<b>有り</b>(省略記法))
    </p>
    <p>
      <!-- v-bind無し｜urlは展開されない -->
      <a href="url" target="_blank">ダイス記</a>(※v-bind:<b>無し</b>)
    </p>
    <p>
      <!-- v-bind有り｜urlは展開される -->
      <a v-bind:href="url" target="_blank">ダイス記</a>(※v-bind:<b>有り</b>)
    </p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script src="test.js"></script>
</body>

</html>

<html>

<head>

<title>Hello dice-record!!</title>

</head>

<body>

<h2>

</h2>

<p>

<input type="text" value="message">(※v-bind:<b>無し</b>)

</p>

<p>

<input type="text" v-bind:value="message">(※v-bind:<b>有り</b>(一般記法))

</p>

<p>

<input type="text" :value="message">(※v-bind:<b>有り</b>(省略記法))

</p>

<p>

<a href="url" target="_blank">ダイス記</a>(※v-bind:<b>無し</b>)

</p>

<p>

<a v-bind:href="url" target="_blank">ダイス記</a>(※v-bind:<b>有り</b>)

</p>

</div>

</body>

</html>

JavaScript

new Vue({
    el: '#application',
    data: {
        message: '今後ともダイス記を宜しく！！ヽ(･ω･)/',
        url: 'https://dice-record.com/vuejs-v-bind/'
    }
})

new Vue({

el: '#application',

data: {

message: '今後ともダイス記を宜しく！！ヽ(･ω･)/',

url: 'https://dice-record.com/vuejs-v-bind/'

}

})

動作お試し

https://jsfiddle.net/dice_record/bq6t9jzL/6/

例からは下記のことが解る。

属性(valueやhref)にv-bindディレクティブがかかってると、データバインディングされ、messageやurlの内容が展開されている。
属性(valueやhref)にv-bindディレクティブがかかってないとデータバインディングされない(messageはそのままmessageと、urlはそのままurlと文字列で評価されてしまう)。

実装例 – クラスのバインディング

前提として「class」、「computed」(算出プロパティ)、「クロージャ」(無名関数)等の理解が必要。単純に「v-bind」の属性のデータバインディングのみを理解したい場合、前述までの記載のみで十分。クラスのバインディングについても理解したい場合は、前提を満たしてから確認することを推奨する。

HTML

<html>

<body>
  <div id="app">
  
  <p v-bind:class="errorMessageClass">
    {{ message }}
  </p>
  
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script src="test.js"></script>
</body>

</html>

<html>

<body>

</p>

</div>

</body>

</html>

JavaScript

new Vue({
    el: '#app',
    data: {
        message: '今後ともダイス記を宜しく！！ヽ(･ω･)/',
    },
    computed: {
    	errorMessageClass: function() {
      	return {
        	error: !this.canBuy
        }
      }
    }
})

new Vue({

el: '#app',

data: {

message: '今後ともダイス記を宜しく！！ヽ(･ω･)/',

computed: {

errorMessageClass: function() {

return {

error: !this.canBuy

}

})

CSS

body {
  background-color : ghostwhite; 
}
.error {
    background-color: pink;
    color: blue;
}

body {

background-color : ghostwhite;

}

.error {

background-color: pink;

color: blue;

}

動作お試し

https://jsfiddle.net/o2bwu5qy/1/

CSS上の、.errorのスタイルが適用されている。このerrorクラスの指定は、errorMessageClass内でしている。this.canBuyがtrueならerrorは適用されず、falseなら適用される。errorMessageClassは、<p>内のclassにv-bindディレクティブを指定することでバインディングしている。