VueにおけるCSSクラスを持つオブジェクトのリアクティビティ

CSSクラスを持つオブジェクトは、 要素にリアクティブにクラスを割り当てるのに便利です。 どのように行われるか見てみましょう。 次のCSSクラスを持つオブジェクトがあるとします：

javascriptdata() {
  return {
    styles: {
      done: false,
    },
  }
}

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

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

クラス done が存在すると、 タグのテキストに取り消し線が引かれるとします：

cssp.done {
  text-decoration: line-through;
}

スタイルオブジェクトを変更し、 クラス done を有効にするボタンを作成しましょう：

App.vue<template>
  <button @click="setDone">hide</button>
</template>

対応するメソッドを記述します：

App.vuemethods: {
  setDone: function() {
    this.styles.done = true;
  }
}

javascriptdata() {
  return {
    obj: {
      hidden: true,
    },
  }
}

cssp.hidden {
  display: none;
}