Help us understand the problem. What is going on with this article?

Vue.js: 複数のクラスをバインディングする場合どのような書き方があるか

More than 1 year has passed since last update.

たとえば、Bootstrapでスタイルを当てると、要素にclass属性値がいくつも与えられたりします。採り上げるのは、そこにさらに、動的にバインディングしたいクラスが加わった場合です。公式サイトを含め、具体例が少なく感じたのでまとめてみました。

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

クラスバインディングの基本は「オブジェクト構文」です。v-bind:class(省略記法:class)ディレクティブにオブジェクトを与え、クラス名をプロパティにして、値となる式を定めます。式のブール(論理)値評価がtureなら、クラスが適用される仕組みです。

<button type="button" :class="{active: isActive}">button</button>

クラスが複数与えられた場合

たとえば、Bootstrapでつぎのようなボタンのクラスを定めたとします(「Outline buttons」参照)。これにバインディングしたいクラスが加わった場合、どのように扱うかです。

<button type="button" class="btn btn-outline-info btn-sm">button</button>

実は、クラスバインディングはclass属性を上書きしません(「コンポーネントにおいて」参照)。ですから、v-bind:class(:class)ディレクティブでクラスバインディングを加えれば済んでしまうのです。

<button type="button" class="btn btn-outline-info btn-sm"
    :class="{active: isActive}">
    button
</button>

けれど、クラスバインディングするのなら、ディレクティブに統一したいところです。オブジェクト構文では、つぎのように定めることになるでしょう。冗長さは否めません。なお、ハイフン(-)は識別子に使えませんので、クォーテーションで文字列にすることを忘れないでください。

<button type="button"
    :class="{btn: true, 'btn-outline-info': true, 'btn-sm': true, active: isActive}">
    button
</button>

配列構文を使う

クラスバインディングには、もうひとつ「配列構文」があります。これなら、与えたいクラスを配列要素に加えるだけです。条件によって動的に切り替えたいクラスは、条件(3項)演算子で定められます。

<button type="button"
    :class="['btn', 'btn-outline-info', 'btn-sm', isActive ? 'active' : '']">
    button
</button>

配列構文の要素には、オブジェクト構文も含められます。この例では、こちらの方がすっきりするでしょう。

<button type="button"
    :class="['btn', 'btn-outline-info', 'btn-sm', {active: isActive}]">
    button
</button>

さらに、複数のクラスはスペース区切りでひとつの要素にまとめてしまえます。固定のクラスと動的にバインディングされるクラスがわかりやすくなりました。

<button type="button"
    :class="['btn btn-outline-info btn-sm', {active: isActive}]">
    button
</button>

条件演算子を使った方がよい場合

条件に応じてふたつのクラスを切り替える場合は、オブジェクト構文では要素をふたつ使わなければならないところが、条件演算子ならひとつにまとめられます。

<button type="button"
    :class="['btn btn-outline-info btn-sm', isActive ? 'active' : 'disabled']">
    button
</button>

複数のクラスバインディングは、書き方がいろいろ考えられます。書きやすさ、わかりやすさから、適した手法を選びましょう。

FumioNonaka
はなし家、もの書き、コード書き。詳しくはwebで。 担当講座: 電気通信大学ウェブシステムデザインプログラム「Web UI・UXプログラミング演習I・Ⅱ」 https://www.websys.edu.uec.ac.jp/ ロクナナワークショップ「Vue.js入門講座」 https://67.org/ws/workshop/detail/0136javascript.html
http://www.fumiononaka.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away