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

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

1 v-bindディレクティブ
2 v-bindディレクティブの書式
3 v-bindディレクティブの使用例
- 3.1 要素の活性／非活性を切り替えるdisabledにバインド
- 3.2 要素のスタイルを設定するstyle属性にバインド
4 v-bindディレクティブの省略記法
5 v-bindディレクティブの実行確認用コード
- 5.1 要素の活性／非活性を切り替えるdisabledにバインド
- 5.2 要素のスタイルを設定するstyle属性にバインド

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要素の属性の前に記述します。

<要素名 v-bind:属性名="属性値を表す値または式" />

1	<要素名 v-bind:属性名="属性値を表す値または式" />

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

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

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

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

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

JavaScript

Vue.createApp({
  data: function() {
    return {
      isDisabled: false
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

isDisabled: false

}

}).mount('#app')

HTML

<div id="app">
  <div>
    <button v-on:click="isDisabled = !isDisabled">isDisabled切り替え</button>
  </div>
  <div>
    <input v-bind:disabled="isDisabled" />
  </div>
</div>

<div>

<button v-on:click="isDisabled = !isDisabled">isDisabled切り替え</button>

</div>

<div>

</div>

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

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

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

JavaScript

Vue.createApp({
  data: function() {
    return {
      foreColor: 'blue'
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

foreColor: 'blue'

}

}).mount('#app')

HTML

<div id="app">
  <button v-bind:style="{ color: foreColor, backgroundColor: '#e0f2ff', 'font-size': '20pt' }">カラーボタン</button>
</div>

<button v-bind:style="{ color: foreColor, backgroundColor: '#e0f2ff', 'font-size': '20pt' }">カラーボタン</button>

</div>

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属性にバインドするコードになります。

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <div>
    <button v-on:click="isDisabled = !isDisabled">isDisabled切り替え</button>
  </div>
  <div>
    <input v-bind:disabled="isDisabled" />
  </div>
</div>

<script>
Vue.createApp({
  data: function() {
    return {
      isDisabled: false
    }
  }
}).mount('#app')
</script>

<div>

<button v-on:click="isDisabled = !isDisabled">isDisabled切り替え</button>

</div>

<div>

</div>

Vue.createApp({

data: function() {

return {

isDisabled: false

}

}).mount('#app')

</script>

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

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

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <button v-bind:style="{ color: foreColor, backgroundColor: '#e0f2ff', 'font-size': '20pt' }">カラーボタン</button>
</div>

<script>
Vue.createApp({
  data: function() {
    return {
      foreColor: 'blue'
    }
  }
}).mount('#app')
</script>