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

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

たとえば、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>

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

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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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