跳到主要内容

Class 与 Style 如何动态绑定

面试速答（30 秒版 TL;DR）​

  • :class 支持字符串、对象、数组三种常见形态。
  • :style 支持对象、数组（多个样式对象合并）。
  • 最佳实践：复杂 class/style 用 computed 生成，模板只负责绑定。

:class 常见写法​

字符串：

<div :class="active ? 'is-active' : ''"></div>

对象（最常用）：

<div :class="{ 'is-active': active, 'is-disabled': disabled }"></div>

数组（组合多个来源）：

<div :class="['base', active && 'is-active', sizeClass]"></div>

:style 常见写法​

对象：

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

数组（后者覆盖前者同名属性）：

<div :style="[baseStyle, overrideStyle]"></div>

常见追问​

  • kebab-case vs camelCase：style 对象里通常用 camelCase（fontSize），也能写字符串 key（'font-size'）。
  • 优先级：同一属性冲突时，后面的覆盖前面的（数组合并时尤其明显）。