在 Vue 中，动态样式的设置是一个常见需求，可通过多种方式实现，以下是对这些方式的详细总结：
1. 绑定 class 属性
对象语法
可以给 :class 绑定一个对象，以动态地切换类名。对象的键是类名，值是一个布尔值，决定是否应用该类名。
<template><div :class="{ active: isActive, 'text-danger': hasError }">动态样式示例</div>
</template><script setup>
import { ref } from 'vue';const isActive = ref(true);
const hasError = ref(false);
</script>
上述代码中，active 类会被应用，因为 isActive 为 true；text-danger 类不会被应用，因为 hasError 为 false。
数组语法
可以给 :class 绑定一个数组，数组中的元素可以是字符串或对象。
<template><div :class="[activeClass, errorClass]">动态样式示例</div>
</template><script setup>
import { ref } from 'vue';const activeClass = ref('active');
const errorClass = ref('text-danger');
</script>
这里 active 和 text-danger 类都会被应用。
与普通 class 共存
class 属性和 :class 动态绑定可以同时使用。
<template><div class="static" :class="{ active: isActive }">动态样式示例</div>
</template><script setup>
import { ref } from 'vue';const isActive = ref(true);
</script>
元素会同时拥有 static 和 active 类。
2. 绑定 style 属性
对象语法
:style 可以绑定一个 JavaScript 对象，对象的键是 CSS 属性名，值是对应的值。
<template><div :style="{ color: activeColor, fontSize: fontSize + 'px' }">动态样式示例</div>
</template><script setup>
import { ref } from 'vue';const activeColor = ref('red');
const fontSize = ref(16);
</script>
上述代码中，元素的文本颜色会是红色，字体大小为 16px。
数组语法
:style 也可以绑定一个数组，数组中的元素是对象，这样可以应用多个样式对象。
<template><div :style="[baseStyles, overridingStyles]">动态样式示例</div>
</template><script setup>
import { ref } from 'vue';const baseStyles = ref({color: 'red',fontSize: '16px'
});
const overridingStyles = ref({fontWeight: 'bold'
});
</script>
元素会同时应用 baseStyles 和 overridingStyles 中的样式。
3. 计算属性和方法
计算属性
可以使用计算属性来返回动态的 class 或 style 对象，使代码更清晰和可维护。
<template><div :class="computedClass">动态样式示例</div>
</template><script setup>
import { ref, computed } from 'vue';const isActive = ref(true);
const hasError = ref(false);const computedClass = computed(() => ({active: isActive.value,'text-danger': hasError.value
}));
</script>
方法
也可以使用方法来返回动态的 class 或 style 对象。
<template><div :class="getClass()">动态样式示例</div>
</template><script setup>
import { ref } from 'vue';const isActive = ref(true);
const hasError = ref(false);const getClass = () => ({active: isActive.value,'text-danger': hasError.value
});
</script>
4. 响应式状态驱动
结合 Vue 的响应式原理，当状态改变时，动态样式会自动更新。
<template><button @click="toggleActive">切换状态</button><div :class="{ active: isActive }">动态样式示例</div>
</template><script setup>
import { ref } from 'vue';const isActive = ref(false);const toggleActive = () => {isActive.value = !isActive.value;
};
</script>
点击按钮时，isActive 状态改变，元素的 active 类会相应地添加或移除。
5. 组件动态样式
在组件中，可以通过 $attrs 和 inheritAttrs 选项来传递和应用动态样式。
<template><ChildComponent :class="{ active: isActive }" />
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const isActive = ref(true);
</script><!-- ChildComponent.vue -->
<template><div v-bind="$attrs">子组件内容</div>
</template><script setup>
defineOptions({inheritAttrs: false
});
</script>
父组件传递的动态 class 会应用到子组件的根元素上。
综上所述，Vue 提供了多种灵活的方式来设置动态样式，开发者可以根据具体需求选择合适的方法。
