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;
}