CSS-klasser via data i Vue

CSS-klasser kan legges til et element avhengig av verdiene til egenskapene i data-objektet. La oss se på et eksempel. Anta at vi har følgende egenskaper:

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

La oss legge til CSS-klasser på elementet avhengig av verdien til våre egenskaper:

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

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