Vue 中的 Class 与 Style 绑定详解2

绑定内联样式

绑定对象

:style 支持绑定 JavaScript 对象值，对应 HTML 元素的 style 属性：

 // 数据const activeColor = ref('red')const fontSize = ref(30)<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

解释：对象的键是 CSS 属性名，值是对应的属性值。注意数值类型的 CSS 属性（如字体大小）需要显式添加单位。

尽管推荐使用 camelCase 命名方式（如 fontSize），但 :style 也支持 kebab-cased 形式的 CSS 属性名（对应 CSS 中的实际名称）：

 <div :style="{ 'font-size': fontSize + 'px' }"></div>

直接绑定一个样式对象通常是更好的做法，可以使模板更简洁：

 // 数据const styleObject = reactive({color: 'red',fontSize: '30px'})<div :style="styleObject"></div>

解释：将样式集中到一个对象中管理，使代码结构更清晰，尤其是在样式较多的情况下。

同样地，如果样式对象需要复杂逻辑，也可以使用返回样式对象的计算属性。

:style 指令也可以和常规的 style 属性共存：

 <h1 style="color: red" :style="'font-size: 1em'">hello</h1>

解释：渲染时会将两者合并：

 <h1 style="color: red; font-size: 1em;">hello</h1>

绑定数组

我们还可以给 :style 绑定一个包含多个样式对象的数组，这些对象会被合并后应用到同一元素上：

 <div :style="[baseStyles, overridingStyles]"></div>

解释：数组中的样式对象会按顺序合并，如果有重复的属性，后面的对象会覆盖前面的。

自动前缀

当在 :style 中使用需要浏览器特殊前缀的 CSS 属性时，Vue 会自动为它们添加相应的前缀。Vue 会在运行时检查浏览器是否支持该属性，如果不支持，会尝试添加各个浏览器的特殊前缀（如 -webkit-、-moz- 等），直到找到浏览器支持的形式。

样式多值

你可以为一个样式属性提供多个（不同前缀的）值：

 <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

解释：Vue 会渲染浏览器支持的最后一个值。在这个例子中，现代浏览器会渲染为 display: flex，而较旧的浏览器会使用它们支持的前缀版本。