Vue에서 data를 통한 CSS 클래스

CSS 클래스는 data 객체의 속성값에 따라 요소에 추가할 수 있습니다. 예제를 통해 살펴보겠습니다. 다음과 같은 속성이 있다고 가정합니다:

javascriptdata() {
  return {
    isActive: true,
    hasError: true,
  }
}

우리 속성들의 값에 따라 요소에 CSS 클래스를 추가해 보겠습니다:

App.vue<template>
  <p :class="{active: isActive, error: hasError}">
    text
  </p>
</template>

Задание 1

다음 속성들이 주어졌습니다:

javascriptdata() {
  return {
    isValid: true,
    isDisabled: true,
  }
}

이 속성들의 값에 따라 해당 태그에 적절한 CSS 클래스가 추가되도록 만드세요.