How to work with dynamic classes and styles in Vue.js?

Vue.js allows dynamic class and style binding using v-bind or the shorthand :class and :style directives.

<template>
  <div :class="{ 'active': isActive, 'error': hasError }">
    <p :style="{ color: textColor, fontSize: textSize + 'px' }">Styled Text</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false,
      textColor: 'blue',
      textSize: 16,
    };
  },
};
</script>

In this example, the active class will be applied when isActive is true, and the error class will be applied when hasError is true. The text color and size are dynamically bound based on the component's da