vue 实现动态样式
动态样式绑定方法
在Vue中实现动态样式主要通过v-bind:class和v-bind:style指令完成，以下是具体实现方式：
类名绑定
<div :class="{ active: isActive, 'text-danger': hasError }"></div>当isActive或hasError为真时，会添加对应类名。数据应定义在组件的data或computed中：
data() {
return {
isActive: true,
hasError: false
}
}数组语法绑定多个类
<div :class="[activeClass, errorClass]"></div>data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}内联样式绑定
对象语法
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data() {
return {
activeColor: 'red',
fontSize: 14
}
}数组语法（合并多个样式对象）
<div :style="[baseStyles, overridingStyles]"></div>条件样式实现
计算属性实现动态类
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}<div :class="classObject"></div>自动前缀处理
Vue会自动为需要浏览器前缀的CSS属性添加前缀，例如transform会在不同浏览器中生成-webkit-transform等属性。
响应式样式更新
所有绑定都是响应式的，当数据变化时会自动更新样式：
methods: {
changeStyle() {
this.activeColor = 'blue';
this.fontSize += 2;
}
}动态主题切换
通过切换CSS类实现整体主题变化：
<div :class="theme">
<button @click="toggleTheme">切换主题</button>
</div>data() {
return {
theme: 'light-theme'
}
},
methods: {
toggleTheme() {
this.theme = this.theme === 'light-theme' ? 'dark-theme' : 'light-theme';
}
}CSS Modules支持
在单文件组件中使用CSS Modules时，可以通过$style访问：
<template>
<div :class="$style.red">Red Text</div>
</template>
<style module>
.red { color: red; }
</style>注意事项
- 对象语法中类名需要引号包裹当包含连字符时
- 数组语法中可以使用三元表达式实现条件类
- 避免在模板中编写复杂逻辑，推荐使用计算属性
- 样式绑定会与普通class属性合并
