Vue.jsのv-bindディレクティブを使うとHTML要素の属性を指定することができます。
今回は、v-bindディレクティブを使用してHTML要素のclass属性（CSSスタイルクラス）を指定する方法について紹介します。
v-bindディレクティブの基本については、以下の記事をご覧ください。
目次
v-bindディレクティブでclass属性にバインドする
v-bindディレクティブでclass属性にバインドする時は、以下のように記述します。
|
1 |
<要素名 v-bind:class="値または式"> |
「値または式」には直接class属性に指定するクラス名の文字列を指定することができます。
また、dataオプションやcomputedオプションに定義したプロパティ名や、methodsオプションに定義したメソッド名を指定することもできます。
class属性にクラス名をバインドする
class属性にCSSに定義したクラス名を指定する場合の例を以下に示します。
CSS
|
1 2 3 |
.font-bold { font-weight: bold; } |
HTML
|
1 2 3 4 5 |
<div id="app"> <div v-bind:class="'font-bold'"> テキスト </div> </div> |
上記の例では、v-bindディレクティブを使用してclass属性にCSSスタイルシートに定義したクラス名の「font-bold」を指定しています。
class属性にdataオプションのプロパティをバインドする
class属性にdataオプションに定義したプロパティ名を指定する場合の例を以下に示します。
CSS
|
1 2 3 |
.font-bold { font-weight: bold; } |
JavaScript
|
1 2 3 4 5 6 7 |
Vue.createApp({ data: function() { return { fontBold: 'font-bold' } } }).mount('#app') |
HTML
|
1 2 3 4 5 |
<div id="app"> <div v-bind:class="fontBold"> テキスト </div> </div> |
上記の例では、CSSスタイルシートに定義したクラスの「font-bold」をdataオプションに「fontBold」という名前でプロパティを定義し、そのプロパティ名をv-bindディレクティブでclass属性にバインドしています。
class属性にcomputedオプションのプロパティをバインドする
class属性にcomputedオプションに定義したプロパティ名を指定する場合の例を以下に示します。
CSS
|
1 2 3 |
.font-bold { font-weight: bold; } |
JavaScript
|
1 2 3 4 5 6 7 |
Vue.createApp({ computed: { fontBold: function() { return 'font-bold'; } } }).mount('#app') |
HTML
|
1 2 3 4 5 |
<div id="app"> <div v-bind:class="fontBold"> テキスト </div> </div> |
上記の例では、CSSスタイルシートに定義したクラスの「font-bold」をcomputedオプションに「fontBold」という名前でプロパティを定義し、そのプロパティ名をv-bindディレクティブでclass属性にバインドしています。
class属性にmethodsオプションのメソッドをバインドする
class属性にmethodsオプションに定義したメソッド名を指定する場合の例を以下に示します。
CSS
|
1 2 3 |
.font-bold { font-weight: bold; } |
JavaScript
|
1 2 3 4 5 6 7 |
Vue.createApp({ methods: { fontBold: function() { return 'font-bold'; } } }).mount('#app') |
HTML
|
1 2 3 4 5 |
<div id="app"> <div v-bind:class="fontBold()"> テキスト </div> </div> |
上記の例では、CSSスタイルシートに定義したクラスの「font-bold」をmethodsオプションに「fontBold」という名前でメソッドを定義し、そのメソッド名をv-bindディレクティブでclass属性にバインドしています。
methodsオプションに定義したメソッドは関数呼び出し形式で指定しますので、メソッド名の後に「()」を付けます。
動的なクラスのバインド
Webアプリケーションでは、データの状態変化に応じてclass属性の指定を付与したり削除したりすることがよくあります。
そのような場合には、Vue.jsのdata、computed、methodsに定義したプロパティやメソッドをバインドすることで簡単に実現できます。
Vue.jsではv-bindディレクティブを使用したclass属性とのバインディングに配列やオブジェクトを使用することができます。配列やオブジェクトをバインドすることで、複数のCSSクラス名を簡単に設定することができます。
class属性に配列をバインドする
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.font-bold { font-weight: bold; } .forecolor-red { color: #ff0000; } .forecolor-blue { color: #0000ff; } .font-size-large { font-size: 18pt; } .font-size-normal { font-size: 14pt; } .font-size-small { font-size: 10pt; } |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
Vue.createApp({ data: function() { return { fontBold: 'font-bold', color: '', size: '' } }, computed: { foreColor: function() { if (this.color === 'red') { return 'forecolor-red'; } else if (this.color === 'blue') { return 'forecolor-blue'; } else { return ''; } } }, methods: { fontSize: function() { if (this.size === 'L') { return 'font-size-large'; } else if (this.size === 'S') { return 'font-size-small'; } else { return 'font-size-normal'; } } } }).mount('#app') |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div id="app"> <div v-bind:class="[fontBold, foreColor, fontSize()]"> テキスト </div> <div> <input type="radio" value="red" v-model="color" />赤 <input type="radio" value="blue" v-model="color" />青 <input type="radio" value="none" v-model="color" />なし </div> <div> {{color}} </div> <div> <select v-model="size"> <option value="N">指定なし</option> <option value="L">大</option> <option value="S">小</option> </select> </div> <div> {{size}} </div> </div> |
上記の例では、dataオプション、computedオプション、methodsオプションに定義したプロパティとメソッドを配列に入れてバインドしています。
computedオプションに定義したforeColorプロパティとmethodsオプションに定義したfontSizeメソッドは画面の状態によって値を変化させ、動的なクラスを指定しています。
v-bindディレクティブでclass属性に配列を指定する際は、dataオプションやcomputedオプションに配列を定義してバインドすることもできます。methodsオプションに定義するメソッドに配列を返す関数を定義しても同様です。
CSS
|
1 2 3 4 5 6 7 8 9 |
.font-bold { font-weight: bold; } .forecolor-red { color: #ff0000; } .font-size-large { font-size: 18pt; } |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Vue.createApp({ data: function() { return { stylesByData: ['font-bold', 'forecolor-red', 'font-size-large'] } }, computed: { stylesByComputed: function() { return ['font-bold', 'forecolor-red', 'font-size-large']; } }, methods: { stylesByMethods: function() { return ['font-bold', 'forecolor-red', 'font-size-large']; } } }).mount('#app') |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="app"> <div v-bind:class="stylesByData"> テキスト1 </div> <div v-bind:class="stylesByComputed"> テキスト2 </div> <div v-bind:class="stylesByMethods()"> テキスト3 </div> </div> |
class属性にオブジェクトをバインドする
v-bindディレクティブでのclass属性とのバインディングにはオブジェクトを使用することもできます。
オブジェクトを指定する場合は、以下の形式（書式）で指定します。
|
1 |
<要素 v-bind:class="{プロパティ名: 値}"> |
オブジェクトには複数のプロパティを定義することができるので、オブジェクトが複数のプロパティを持つ場合は、次のようになります。
|
1 |
<要素 v-bind:class="{プロパティ名1: 値1, プロパティ名2: 値2, プロパティ名3: 値3}"> |
「プロパティ名」には、適用するクラス名を指定します。
「値」にはdataオプションやcomputedオプションに定義したプロパティ名を指定することができます。また、methodsオプションに定義したメソッド名を「()」を付けた関数呼び出しとして指定することもできます。
指定する値はboolean型の真偽値を指定します。指定した値がtruthy（false, 0, -0, 0n, null, “”, undefined, NaN以外）であれば、プロパティ名に指定したクラス名が有効になります。（クラス名が付与されます。）
以下に、オブジェクトを使用してクラスを指定する例を示します。
CSS
|
1 2 3 4 5 6 |
.font-bold { font-weight: bold; } .font-green { color: #007f0e; } |
JavaScript
|
1 2 3 4 5 6 7 8 |
Vue.createApp({ data: function() { return { isBold: false, isGreen: false } } }).mount('#app') |
HTML
|
1 2 3 4 5 6 7 |
<div id="app"> <div v-bind:class="{'font-bold': isBold, 'font-green': isGreen}"> テキスト </div> <button v-on:click="isBold = !isBold">太字</button> <button v-on:click="isGreen= !isGreen">緑色</button> </div> |
上記の例では、クラス名が「font-bold」のスタイルと、「font-green」のスタイルをdiv要素に指定しています。
dataオプションに定義したisBoldプロパティがtrueの場合は太字になり、isGreenプロパティがtrueの場合に前景色が緑になります。
isBoldプロパティがtrue、およびisGreenプロパティがtrueの場合に出力されるHTMLは次のようになります。
|
1 2 3 |
<div class="font-bold font-green"> テキスト </div> |
逆に両方のプロパティがfalseの場合は、次のようなHTMLが出力されます。
|
1 2 3 |
<div class> テキスト </div> |
