Vue :class మరియు :styleకు ఆబ్జెక్ట్ మరియు ఆరే ప్రత్యేక సింటాక్స్ ఇస్తుంది, తద్వారా మీరు రియాక్టివ్ స్టేట్ ఆధారంగా క్లాస్లు మరియు ఇన్లైన్ స్టైల్లను షరతులతో కూడిన రీతిలో వర్తించవచ్చు — క్లాస్ స్ట్రింగ్లను మాన్యువల్గా నిర్మించడం కంటే శుద్ధిగా ఉంది.
:class కోసం ఆబ్జెక్ట్ సింటాక్స్ — షరతు ఆధారంగా క్లాస్లను టాగుల్ చేయండి
vue
<script setup>
import { ref } from "vue";
const isActive = ref(true);
const hasError = ref(false);
</script>
<template>
<!-- a class is applied when its value is truthy -->
<div :class="{ active: isActive, 'text-red': hasError }">...</div>
<!-- renders class="active" (active=true, text-red=false) -->
</template>