v-bindディレクティブでHTML要素の属性にバインドする [Vue.js]

Vue.js The Progressive JavaScript Framework

本記事では、Vue.jsのv-bindディレクティブについて紹介します。

v-bindディレクティブ

HTMLの要素はclass(クラス)やstyle(スタイル)をはじめとした様々な属性を持っています。
Webアプリケーションを作成する際は状態(データ)の変化によって、HTML要素のclass属性やstyle属性を変更することがよくあります。
img要素であればsrc属性を状態の変化によって切り替えることで、表示される画像を変更することができます。

Vue.jsのv-bindディレクティブを使えば、HTML要素の属性値を状態によって変化させることができるので、動的な動作をするWebアプリケーションの実装が簡単に実現できます。

v-bindディレクティブはHTML要素の属性にバインドを行うので、属性を持っているすべての要素に対して使用することができます。

v-bindディレクティブの書式

v-bindディレクティブはHTML要素の属性の前に記述します。

属性に指定する属性値の部分(引数)には、Vueインスタンスのdataオプションに定義したデータ(プロパティ)の名前、computedオプションに定義したデータ(プロパティ)の名前、methodsオプションに定義したメソッド(プロパティ)名などを指定します。

v-bindディレクティブの使用例

ここではv-bindディレクティブを使用して、HTML要素の属性にデータ(値や式)をバインドする例をいくつか示します。

要素の活性/非活性を切り替えるdisabledにバインド

input要素のdisabled属性にVueインスタンスに定義したdataオプションのisDisabledプロパティをバインドする例を以下に示します。

JavaScript

HTML

「isDisabled切り替え」ボタンがクリックされると、テキストボックスの活性と非活性(有効と無効)が変更されます。

要素のスタイルを設定するstyle属性にバインド

button要素のstyle属性にVueインスタンスに定義したdataオプションのforeColorプロパティをバインドする例を以下に示します。

JavaScript

HTML

style属性にスタイルを指定する際は、スタイルのオブジェクトを指定します。オブジェクトに複数のプロパティを指定する場合はカンマ(,)で区切ります。

color: foreColor, backgroundColor: ‘#e0f2ff’

スタイルのプロパティはキャメルケース(camelCase)、またはケバブケース(kebab-case)で指定します。ケバブケースを使用する場合はプロパティ名をクォート(’)で括ります。

backgroundColor: ‘#e0f2ff’, ‘font-size’: ’16px’

v-bindディレクティブの省略記法

本記事ではここまで、v-bindディレクティブの記法として「v-bind:属性名=”属性値を表す値または式”」の形式で記述してきましたが、v-bindディレクティブには省略記法が用意されています。
「v-bind:属性名=”属性値を表す値または式”」の「v-bind:」の部分は「:」に置き換えることができます。
ですので、「v-bind:属性名=”属性値を表す値または式”」は「:属性名=”属性値を表す値または式”」と記述することができます。
例えば、「v-bind:disabled=”isDisabled”」であれば「:disabled=”isDisabled”」となります。

v-bindディレクティブの実行確認用コード

次のコードをHTMLファイル(拡張子が.htmlのファイル)に貼り付けて保存するか、jsFiddleのHTMLパネルに貼り付けて実行すると、コードの実行結果が確認できます。

要素の活性/非活性を切り替えるdisabledにバインド

「v-bindディレクティブの使用例」で示したdisabled属性にバインドするコードになります。

要素のスタイルを設定するstyle属性にバインド

「v-bindディレクティブの使用例」で示したstyle属性にバインドするコードになります。

jsFiddleの使い方については、以下の記事を参考にしてください。

jsFiddle 簡単手軽にHTMLページのコーディング(実装)とシェア(共有)ができる超便利なWebサービス
Webサイトの制作やWebシステムの開発をしている方だと経験がしたことがあると思いますが、本格的に実装をする前にちょっと動作の確認や...

Vue.js 入門 Tips 一覧