Vue 3 动态绑定 style 主用 :style，支持对象语法（如 {color: textColor}）和数组语法（如 [baseStyle, dynamicStyle]），需手动加单位、优先级后覆盖前，推荐用计算属性提取逻辑并优先使用 :class 控制样式。
Vue 3 中动态绑定 style 主要用 :style（即 v-bind:style 的简写），支持对象语法和数组语法两种方式，能实时响应数据变化，无需手动操作 DOM。
对象语法：绑定单个样式对象
最常用的方式，把一个 JavaScript 对象作为值传给 :style，属性名可用驼峰式（如 fontSize）或短横线加引号（如 'font-size'），值必须是响应式数据。
- 直接写内联对象：
<div :style="{ color: textColor, fontSize: size + 'px', backgroundColor: bg }"></div> - 推荐提取为响应式变量或计算属性，让模板更清晰：
<div :style="computedStyles"></div>，其中computedStyles是返回样式对象的计算属性 - 注意单位要手动拼接，比如
fontSize: 16 + 'px'，Vue 不会自动补px
数组语法：叠加多组样式对象
适用于需要合并基础样式与条件样式、或分离不同逻辑来源的样式场景，数组中靠后的样式优先级更高（后者覆盖前者）。
- 基础写法：
<div :style="[baseStyle, dynamicStyle]"></div>，baseStyle可以是 data 或 ref 定义的对象，dynamicStyle可以是计算属性或方法返回的对象 - 常用于主题切换、状态覆盖等：比如固定字体大小，但根据错误状态动态加红色边框和背景
- 数组里可混用静态对象、响应式对象、计算属性，全部保持响应式更新
实用建议与注意事项
虽然 :style 灵活，但实际开发中要注意取舍：
立即学习“前端免费学习笔记（深入）”；
- 优先用
:class控制样式类，语义更强、CSS 可复用、利于维护；:style更适合真正“动态”的值，比如颜色、尺寸、位移等需实时计算的场景 - 复杂样式逻辑别堆在模板里，提取到计算属性中，提升可读性和复用性
- 避免在
:style中写大量内联表达式，既难调试又影响性能 - 浏览器不识别的样式属性（如拼写错误）会被忽略，不会报错，建议配合 TypeScript 或 IDE 提示校验
