CSS синфҳо тавассути data дар Vue

CSS синфҳоро ба унсури вобаста ба қиматҳои хосиятҳои объекти data илова кардан мумкин аст. Биёед ба мисол нигарем. Бигзор мо хосиятҳои зеринро дорем:

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

Ба унсур CSS синфҳоро вобаста ба қимати хосиятҳои мо илова кунем:

App.vue<template>
  <p :class="{active: isActive, error: hasError}">
    матн
  </p>
</template>

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