VueにおけるCSSクラスのオブジェクト

CSSクラスはオブジェクトに格納することもできます。この場合、クラス名はオブジェクトのキーとなり、オブジェクトの要素は論理値になります。値がtrueの場合、そのクラスは要素に追加され、falseの場合は追加されません。

実際に試してみましょう。次のようなクラスのオブジェクトがあるとします：

javascriptdata() {
  return {
    obj: {
      active: true,
      valid:  false,
    },
  }
}

このオブジェクトをタグにバインドしましょう：

App.vue<template>
  <p :class="obj">text</p>
</template>

Задание 1

次のCSSクラスのオブジェクトがあります：

javascriptdata() {
  return {
    obj: {
      done: true,
      selected:  false,
    },
  }
}

これらのクラスを任意のタグに適用してください。どのクラスが適用され、どのクラスが適用されなかったかを確認してください。