uni-app的:style只接受对象或数组，不支持字符串拼接；键名须驼峰（如backgroundColor），值不能为undefined/null；多样式用数组合并，列表状态需按id独立管理并初始化默认值。
uni-app的:style只接受对象或数组，不支持字符串拼接
直接写 :style="\'color: \' + textColor" 会完全失效，控制台无报错但样式不渲染。uni-app 的 :style 绑定底层依赖 Vue 2 的响应式 diff，必须传入合法 JS 对象或对象数组。
常见错误现象：H5 看似正常，小程序/APP 端背景色、字体大小全丢；或者改了 textColor 值，视图却不更新。
- 键名必须是驼峰式：
backgroundColor，不能写'background-color'（除非加引号当字符串键） - 值不能是 undefined 或 null，否则该样式项被忽略（比如
fontSize: this.size || undefined就会丢掉 fontSize） - 避免在
:style中调用函数：:style="getStyles()"—— 每次重绘都执行，且无法缓存，改用computed
多状态样式合并要用数组语法：[:style="[baseStyle, dynamicStyle]"]
静态样式（如固定 padding、borderRadius）和动态样式（如根据 isActive 切换 background）不能混写在一个对象里硬编码，否则可维护性差、易出错。数组语法让职责分离更清晰，且 uni-app 能正确合并（后项覆盖前项）。
使用场景：按钮有统一基础样式，但 loading 状态要禁用指针、加灰背景、禁用点击区域。
-
baseStyle放 data 里定义：{ padding: '12px', borderRadius: '6px', cursor: 'pointer' } -
dynamicStyle用 computed 返回：{ backgroundColor: this.loading ? '#ccc' : '#409eff', pointerEvents: this.loading ? 'none' : 'auto' } - 模板中写成：
<view :style="[baseStyle, dynamicStyle]"> - 注意：数组里不能出现
undefined，哪怕某一项是空对象也要写成{}
列表项动态样式必须按 id 管理状态，别用 index
在 v-for 中用 :style="{ backgroundColor: activeIndex === index ? '#409eff' : '#fff' }" 看似简单，但列表排序、增删、搜索后，index 会漂移，导致高亮错位——这是真机上最常被忽略的 bug 来源。
正确做法是把状态映射到每项唯一标识上：
- 数据结构里带
id字段（如{ id: 'item-1', title: '新闻' }） - 用
data或computed维护一个映射对象：activeMap: { 'item-1': true, 'item-2': false } - 模板中写：
:style="{ backgroundColor: activeMap[item.id] ? '#409eff' : '#fff' }" - 初始化时确保每个
id都有默认值，避免activeMap[item.id]是undefined
主题切换必须走 CSS 变量 + document.documentElement.style.setProperty
想全局切深色/浅色模式？别试图动态插入 <style> 标签或操作 document.styleSheets —— App 端（尤其 iOS WKWebView）会直接报 Failed to execute 'insertRule' on 'CSSStyleSheet'，小程序也不稳定。
唯一可靠路径是：在 App.vue 的 onLaunch 读取本地缓存，然后批量设置 :root 变量：
document.documentElement.style.setProperty('--primary-color', '#409eff')
document.documentElement.style.setProperty('--bg-color', '#ffffff')
然后在 CSS 中用 color: var(--primary-color)。注意：变量名必须带 -- 前缀，且只能在根节点设置才全局有效。
容易被忽略的点：H5 端可以随时 setProperty，但小程序端首次渲染后修改变量，部分样式可能不会立即响应——建议在页面 onLoad 后再触发一次 this.$forceUpdate() 或用 nextTick 包裹。
