Vue.js

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

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

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

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

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

ここで言う「属性」とは、ヒトHTMLの属性を指す。一例としては、valueやhref、list等が挙げられる。
実装例のコード見つつ、下の方のJSFiddleの動くものを見るのが手っ取り早くてお勧め。

省略記法

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

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

HTML

 

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

HTML

 

JavaScript

 

動作お試し

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

 

JavaScript

 

CSS

 

動作お試し

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

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

 

参照

『Vue.js入門』

Vue.js公式

https://jp.vuejs.org/v2/api/#v-bind

以上です。

ABOUT ME
ダイス
アラサーSE(20代)。 主な経験は、PGとしてJava(SpringBoot)、C、PHP(Laravel)、VBAがある。SS、UTの経験有り。最近はUI工程を経験中。 IT業界だけでなく、教育業界(予備校での運営スタッフ)での経験有り。 サイトでは、特定の分野に限定せずに幅広く発信していきます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です