JavaScript

【Vue.js】classとstyleのバインディングを解説

筆者
筆者
Vue.jsではHTMLクラスを動的に切り替えることができます。それによって、クライアントの操作に合わせたスタイルの変更が可能になります。例えば、チェックボックスにチェックマークを入れたら文字色を薄くしたり、ECサイトであればカートに入れた商品をボーダーで囲んだりすることができます。

以下の基本テンプレートに実際にコードを書き加えながら学習していきます。index.htmlというファイル名でデスクトップに保存して準備をしましょう。

HTMLクラスのバインディングの基本構文

基本的な構文はつぎのとおりです。

<div v-bind:class=“{ active: isActive }”>Hello</div>

この場合、activeがクラス名になります。isActiveには真偽値が入ります。isActiveの値がtrueであれば、activeクラスが有効になります。falseであれば、activeクラスは無効になります。

では、実際に動きをみてみましょう。コードを追加してブラウザで開いてみてください。

以下のような赤色の文字が表示されれば成功です。

動作の流れを見ていきましょう。

まず、①の部分でHTMLクラスをバインディングしています。つぎにisActiveキーの真偽値を②の部分で確認しています。isActiveの値がtrueなので、activeクラスが有効になります。activeクラスが有効なので、③のスタイルが適用されます。

ハイフンを含んだクラス名をバインディングする場合、命名に注意が必要です。例えば、.box-colorというクラス名であれば、「v-bind:class=”{ ‘box-color’: isActive }”」のようにシングルクォートで囲む必要があります。

オブジェクトはインラインでなくても問題ありません

「v-bind:class=”{ active: isActive }”」の「{ active: isActive }」の部分はつぎのように参照の形で表現することもできます。

v-bind:classディレクティブはプレーンなclass属性と共存可

つぎのように、v-bind:classディレクティブはプレーンなclass属性と共存できます。

isActiveが真の場合、実行するとつぎのように描画されます。staticクラス、activeクラスの両方が描画されていることが確認できます。

<div class=”static active”>Hello</div>

以上が、HTMLクラスのバインディングの基本です。

インラインスタイルのバインディングの基本構文

インラインスタイルをバインディングすることもできます。基本的な構文はつぎのとおりです。

<div v-bind:style=“{ color: activeColor }”>Hello</div>

テンプレートにコードを書いてみましょう。①のactiveColorとactiveFontSizeで②のdataオプションのプロパティを参照しています。

v-bind:classディレクティブ同様、CSSのプロパティ名にハイフンを含む場合はプロパティ名をシングルクォートで囲む(‘font-size’)か、またはキャメルケース(fontSize)で表記する必要があります。

v-bind:styleディレクティブもオブジェクトはインラインでなくてもOK

v-bind:styleディレクティブのプロパティが多くなるとコードが見づらくなってしまうので、つぎの例のようにdataオプション内のプロパティを参照することもできます。

v-bind:styleディレクティブから複数のスタイルオブジェクトを参照する方法

v-bind:styleディレクティブの値を配列にすることで複数のスタイルオブジェクトを参照することができます。

ToDoアプリを作ってみよう

class・styleバインディングは実際のWebアプリではどのようなところに使われているのでしょうか。ToDoアプリを例にして確認してみましょう。

上のコードをブラウザで開くと、つぎのような画面が表示されましたか?

チェックボックスにチェックを入れてみましょう。

チェックを入れると以下の画像のように「MyTask」文字が薄くなってさらに取り消し線が引かれます。この部分でclassバインディングが使われています。

筆者
筆者
classバインディングを使うことでタスクが完了したことが明確です。もしチェックボックスにチェックを入れた時に何も反応がなかったら、だいぶ印象がちがうと思います。適切にclassバインディングを使うことでユーザーにとって使いやすいWebアプリを実現できるのではないかと思います。以上、Vue.jsのclass・styleバインディングの使い方でした。