一、class 绑定

Vue 使用 v-bind:class（简写为 :class）来动态切换 CSS 类。

1. 对象语法

最常用的方式，通过一个对象来控制类的添加与移除。

<template>
  <div :class="{ active: isActive, 'text-danger': hasError }">
    动态 class
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    }
  }
}
</script>

<style>
.active { background-color: #007bff; color: white; padding: 10px; }
.text-danger { color: red; }
</style>

✅ 说明：

• active 类会根据 isActive 的真假值决定是否添加。
• 类名含特殊字符（如 -）需加引号。
• 支持任意布尔表达式：:class="{ error: type === 'error' }"

2. 数组语法

适用于需要动态切换多个类的场景。

<div :class="[activeClass, errorClass]">
  动态 class 数组
</div>

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

🔍 结果：class="active text-danger"

你也可以使用三元表达式控制某个类的有无：

<div :class="[isActive ? 'active' : '', errorClass]">
  条件 class
</div>

或者结合对象语法（推荐）：

<div :class="[{ active: isActive }, errorClass]">
  混合写法
</div>

3. 与普通 class 共存

:class 可以与静态 class 同时使用：

<div class="static" :class="{ active: isActive }">
  静态 + 动态 class
</div>

✅ 结果：

• 若 isActive = true → class="static active"
• 若 isActive = false → class="static"

4. 在组件上使用 class

当你在自定义组件上使用 class，它会自动合并到根元素上：

<!-- MyButton.vue -->
<template>
  <button class="btn">按钮</button>
</template>

<!-- 使用 -->
<MyButton class="btn-primary" />

✅ 最终渲染：<button class="btn btn-primary">按钮</button>

⚠️ 注意：组件有多个根节点时，需使用 $attrs 或显式绑定。

二、style 绑定

Vue 也支持通过 :style 动态绑定内联样式。

1. 对象语法

推荐使用驼峰命名（camelCase）或短横线命名（kebab-case，需加引号）。

<div :style="{ color: textColor, fontSize: fontSize + 'px' }">
  动态样式
</div>

data() {
  return {
    textColor: 'red',
    fontSize: 16
  }
}

✅ 等价于：style="color: red; font-size: 16px;"

2. 使用 CSS 变量（推荐）

更现代的方式是结合 CSS 自定义属性：

<div :style="{ '--bg-color': bgColor }" class="box">
  使用 CSS 变量
</div>

.box {
  background-color: var(--bg-color, #ccc);
  padding: 20px;
}

data() {
  return {
    bgColor: '#007bff'
  }
}

✅ 优势：样式仍由 CSS 控制，JS 只负责传值，更易维护。

3. 数组语法

可以将多个样式对象应用到同一个元素：

<div :style="[baseStyles, overrideStyles]">
  多样式合并
</div>

data() {
  return {
    baseStyles: {
      fontSize: '16px',
      padding: '10px'
    },
    overrideStyles: {
      color: 'blue',
      fontWeight: 'bold'
    }
  }
}

✅ 结果：所有样式合并应用。

---

4. 自动添加浏览器前缀

Vue 会自动为 :style 添加必要的浏览器前缀（如 -webkit-, -moz-），无需手动处理。

data() {
  return {
    transform: 'rotate(30deg)'
  }
}

✅ Vue 会自动补全为：

transform: rotate(30deg);
-webkit-transform: rotate(30deg);

三、Vue 3 Composition API 写法

在 setup() 中，class 和 style 绑定方式完全一致，只需将数据定义在 ref 或 reactive 中。

<script>
import { ref, reactive } from 'vue'

export default {
  setup() {
    const isActive = ref(true)
    const state = reactive({
      textColor: 'green',
      fontSize: 18
    })

    return {
      isActive,
      ...state
    }
  }
}
</script>

<template>
  <div 
    :class="{ active: isActive }"
    :style="{ color: textColor, fontSize: fontSize + 'px' }">
    Composition API 风格
  </div>
</template>

四、最佳实践与常见问题

✅ 推荐做法

1. 优先使用 class 绑定，而非直接操作 style

   • 更利于复用样式
   • 性能更好（避免大量内联样式）

2. 复杂样式用 class，简单动态用 style

   • 如颜色、尺寸等可变属性可用 :style
   • 状态类（如 loading、disabled）用 :class

3. 使用 CSS 变量 + :style 传参

   • 解耦 JS 与 CSS
   • 支持主题切换

❓ 常见问题

1. 样式未生效？

• 检查绑定的数据是否正确响应式（在 data 或 ref 中定义）
• 检查 CSS 优先级（是否被其他样式覆盖）
• 使用 !important 调试（不推荐长期使用）

2. 动态 class 名怎么写？

<div :class="['item', 'item-' + index]">动态类名</div>

或使用计算属性：

computed: {
  itemClass() {
    return `item item-${this.index}`
  }
}

五、总结

绑定类型	语法	适用场景
:class 对象语法	{ active: isActive }	条件切换类
:class 数组语法	[activeClass, errorClass]	动态类名列表
:style 对象语法	{ color: textColor }	内联样式控制
:style 数组语法	[style1, style2]	多样式合并
CSS 变量	--color: red	主题、动态主题

六、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！