class属性(CSSクラス)を指定するv-bindディレクティブ [Vue.js]

Vue.js The Progressive JavaScript Framework

Vue.jsのv-bindディレクティブを使うとHTML要素の属性を指定することができます。

今回は、v-bindディレクティブを使用してHTML要素のclass属性(CSSスタイルクラス)を指定する方法について紹介します。

v-bindディレクティブの基本については、以下の記事をご覧ください。

v-bindディレクティブでHTML要素の属性にバインドする [Vue.js]
本記事では、Vue.jsのv-bindディレクティブについて紹介します。 v-bindディレクティブ HTMLの要素はcla...

v-bindディレクティブでclass属性にバインドする

v-bindディレクティブでclass属性にバインドする時は、以下のように記述します。

「値または式」には直接class属性に指定するクラス名の文字列を指定することができます。
また、dataオプションcomputedオプションに定義したプロパティ名や、methodsオプションに定義したメソッド名を指定することもできます。

class属性にクラス名をバインドする

class属性にCSSに定義したクラス名を指定する場合の例を以下に示します。

CSS

HTML

上記の例では、v-bindディレクティブを使用してclass属性にCSSスタイルシートに定義したクラス名の「font-bold」を指定しています。

class属性にdataオプションのプロパティをバインドする

class属性にdataオプションに定義したプロパティ名を指定する場合の例を以下に示します。

CSS

JavaScript

HTML

上記の例では、CSSスタイルシートに定義したクラスの「font-bold」をdataオプションに「fontBold」という名前でプロパティを定義し、そのプロパティ名をv-bindディレクティブでclass属性にバインドしています。

class属性にcomputedオプションのプロパティをバインドする

class属性にcomputedオプションに定義したプロパティ名を指定する場合の例を以下に示します。

CSS

JavaScript

HTML

上記の例では、CSSスタイルシートに定義したクラスの「font-bold」をcomputedオプションに「fontBold」という名前でプロパティを定義し、そのプロパティ名をv-bindディレクティブでclass属性にバインドしています。

class属性にmethodsオプションのメソッドをバインドする

class属性にmethodsオプションに定義したメソッド名を指定する場合の例を以下に示します。

CSS

JavaScript

HTML

上記の例では、CSSスタイルシートに定義したクラスの「font-bold」をmethodsオプションに「fontBold」という名前でメソッドを定義し、そのメソッド名をv-bindディレクティブでclass属性にバインドしています。
methodsオプションに定義したメソッドは関数呼び出し形式で指定しますので、メソッド名の後に「()」を付けます。

動的なクラスのバインド

Webアプリケーションでは、データの状態変化に応じてclass属性の指定を付与したり削除したりすることがよくあります。
そのような場合には、Vue.jsのdata、computed、methodsに定義したプロパティやメソッドをバインドすることで簡単に実現できます。

Vue.jsではv-bindディレクティブを使用したclass属性とのバインディングに配列やオブジェクトを使用することができます。配列やオブジェクトをバインドすることで、複数のCSSクラス名を簡単に設定することができます。

class属性に配列をバインドする

CSS

JavaScript

HTML

上記の例では、dataオプション、computedオプション、methodsオプションに定義したプロパティとメソッドを配列に入れてバインドしています。
computedオプションに定義したforeColorプロパティとmethodsオプションに定義したfontSizeメソッドは画面の状態によって値を変化させ、動的なクラスを指定しています。

v-bindディレクティブでclass属性に配列を指定する際は、dataオプションやcomputedオプションに配列を定義してバインドすることもできます。methodsオプションに定義するメソッドに配列を返す関数を定義しても同様です。

CSS

JavaScript

HTML

class属性にオブジェクトをバインドする

v-bindディレクティブでのclass属性とのバインディングにはオブジェクトを使用することもできます。
オブジェクトを指定する場合は、以下の形式(書式)で指定します。

オブジェクトには複数のプロパティを定義することができるので、オブジェクトが複数のプロパティを持つ場合は、次のようになります。

「プロパティ名」には、適用するクラス名を指定します。
「値」にはdataオプションやcomputedオプションに定義したプロパティ名を指定することができます。また、methodsオプションに定義したメソッド名を「()」を付けた関数呼び出しとして指定することもできます。
指定する値はboolean型の真偽値を指定します。指定した値がtruthy(false, 0, -0, 0n, null, “”, undefined, NaN以外)であれば、プロパティ名に指定したクラス名が有効になります。(クラス名が付与されます。)

以下に、オブジェクトを使用してクラスを指定する例を示します。

CSS

JavaScript

HTML

上記の例では、クラス名が「font-bold」のスタイルと、「font-green」のスタイルをdiv要素に指定しています。
dataオプションに定義したisBoldプロパティがtrueの場合は太字になり、isGreenプロパティがtrueの場合に前景色が緑になります。

isBoldプロパティがtrue、およびisGreenプロパティがtrueの場合に出力されるHTMLは次のようになります。

逆に両方のプロパティがfalseの場合は、次のようなHTMLが出力されます。

Vue.js 入門 Tips 一覧