vue动态绑定class的几种方式

第一种  基础用法

/
<template>
  <div :class="active">div>
template>
 
<script setup>
import { ref } from "vue";
const active = ref(true);
script>
 
<style>style>

第二种：三元运算法

 
 
<script setup>
import { ref } from "vue";
const active = ref(1);
const isBind = ref(true);
script>
 
<style>style>

第三种：对象法

/
<template>
  <div :class="{ actives: isActive, 'text-danger': hasError }">jkjkjkdiv>
template>
 
<script setup>
import { ref } from "vue";
const active = ref(true);
const isActive = ref(true);
const hasError = ref(true);
script>
 
<style>style>

第四种 ：数组法

 
 
<script setup>
import { ref } from "vue";
const active = ref(true);
const isActive = ref(true);
const hasError = ref(true);
script>
 
<style>style>

<template>
  <div :class="status">jkjkjkdiv>
template>
 
<script setup>
import { ref, computed } from "vue";
const status = ref(["bold", "highlight"]);
script>
 
<style>style>

第五种 ：计算属性法

/
<template>
  <div :class="dynamicClass">jkjkjkdiv>
template>
 
<script setup>
import { ref, computed } from "vue";
const active = ref(true);
const isActive = ref(true);
const hasError = ref(true);
 
const ClassName = ref("");
const dynamicClass = computed(() => ({
  active: isActive.value,
  inactive: !isActive.value,
}));
script>
 
<style>style>

第六种：方法

/
<template>
  <div :class="dynamicClass()">jkjkjkdiv>
template>
 
<script setup>
import { ref, computed } from "vue";
 
const isActive = ref(true);
 
const dynamicClass = () => ({
  active: isActive.value,
  inactive: !isActive.value,
});
script>
 
<style>style>

****tips:

虽然方法和计算属性得到的结果一样  还是要多使用计算属性 ？

方法和计算属性在Vue3中都可以用于处理和操作数据，但它们在使用和性能上有一些关键的区别。计算属性是一种具有缓存机制的响应式对象，只有当其依赖的数据发生变化时才会重新计算。而方法没有缓存机制，每次页面更新时都会重新执行，无论数据是否变化。