在 Vue 中，你可以通过绑定计算属性或数据属性来控制元素的类名，这样能避免直接操作 DOM，符合 Vue 的响应式原理。下面分别介绍如何使用计算属性和数据属性来控制类名。
使用计算属性控制类名
使用计算属性控制类名
计算属性是基于响应式依赖进行缓存的，只有当依赖发生变化时，计算属性才会重新计算。以下是一个示例，假设我们要根据 isValid 状态来决定是否添加 addCheckstyle 类：

<template><div><!-- 绑定计算属性到 class --><input v-model="inputValue" @blur="handleBlur" :class="inputClass" id="inputId"></div>
</template><script>
import { defineComponent, ref, computed } from 'vue';export default defineComponent({setup() {const inputValue = ref('');const isValid = ref(true);// 定义计算属性const inputClass = computed(() => {return {'addCheckstyle': !isValid.value // 如果 isValid 为 false，则添加 addCheckstyle 类};});const handleBlur = () => {// 模拟验证逻辑isValid.value = inputValue.value.length > 0;};return {inputValue,inputClass,handleBlur};}
});
</script><style scoped>
.addCheckstyle {border: 1px solid red; /* 示例样式 */
}
</style>

在上述代码中：
定义了一个计算属性 inputClass，它返回一个对象，对象的键是类名，值是布尔值。如果布尔值为 true，则对应的类名会被添加到元素上。
在模板中，使用 :class 指令绑定计算属性 inputClass 到输入框的 class 属性上。
在 handleBlur 方法中，模拟了验证逻辑，根据输入值的长度更新 isValid 的值，从而影响计算属性的结果。
使用数据属性控制类名
使用数据属性控制类名

数据属性是普通的响应式数据，当数据发生变化时，会触发 DOM 更新。以下是使用数据属性控制类名的示例：

<template><div><!-- 绑定数据属性到 class --><input v-model="inputValue" @blur="handleBlur" :class="{ 'addCheckstyle': hasError }" id="inputId"></div>
</template><script>
import { defineComponent, ref } from 'vue';export default defineComponent({setup() {const inputValue = ref('');const hasError = ref(false);const handleBlur = () => {// 模拟验证逻辑hasError.value = inputValue.value.length === 0;};return {inputValue,hasError,handleBlur};}
});
</script><style scoped>
.addCheckstyle {border: 1px solid red; /* 示例样式 */
}
</style>

在上述代码中：
定义了一个数据属性 hasError，用于表示输入是否有错误。
在模板中，使用 :class 指令绑定一个对象到输入框的 class 属性上，对象的键是类名，值是 hasError。如果 hasError 为 true，则添加 addCheckstyle 类。
在 handleBlur 方法中，模拟了验证逻辑，根据输入值的长度更新 hasError 的值，从而影响元素的类名。
通过以上两种方式，你可以方便地使用计算属性或数据属性来控制元素的类名，避免直接操作 DOM。