单选用 selectedIndex变量控制，多选用Set或布尔数组，独立状态直接存item字段；注意key唯一、避免全量重渲染、保留用户状态、兼顾多端样式兼容性。
直接用 v-model 或响应式数据 + 条件 class 就能实现，但关键在于状态管理方式——是单选、多选、还是每个项独立切换，决定了你该用数组索引、布尔值映射，还是对象字段控制。
单选按钮列表：用一个变量记录当前选中项索引
适用于“一次只能选一个”的场景，比如订单状态筛选、Tab 切换、角色选择等。核心是共享一个 selectedIndex，所有项通过 :class="{ active: selectedIndex === index }" 绑定样式。
- 点击时直接赋值
this.selectedIndex = index，无需判断是否已选中 - 如果允许“取消选中”，就加个判断：
this.selectedIndex === index ? this.selectedIndex = -1 : this.selectedIndex = index - 注意
v-for中的:key必须唯一，推荐用:key="item.id"而不是:key="index"，否则列表动态增删时容易错乱 - 原生
button或view都可以，但别忘了加cursor: pointer和user-select: none防止误触发文本选中
多选按钮列表：用布尔数组或 Set 管理选中状态
适合购物车勾选、权限批量操作等。不推荐用 indexOf 查找，性能差且易出错；优先用 Set 或布尔数组映射。
- 初始化用
selectedSet = new Set()，点击时用selectedSet.has(id) ? selectedSet.delete(id) : selectedSet.add(id) - 渲染时用
:class="{ selected: selectedSet.has(item.id) }" - 如果后端返回的是 ID 数组（如
["1", "3"]），初始化时直接new Set(ids)即可，不用遍历比对 - 避免把整个
list每次都.map出新数组去更新selected字段——这会触发全量重渲染，卡顿明显
每项独立状态（如开关、收藏、点赞）：直接在 item 对象上存状态字段
这是最灵活也最容易出问题的方式。常见错误是直接修改 props 传入的对象，导致响应失效或跨组件污染。
- 确保原始数据是深拷贝或从
data()返回的本地副本，例如：list: this.$route.params.list.map(i => ({ ...i, isLiked: false })) - 状态字段名要明确，比如
isCollected、isEnabled，别用模糊的status或flag - 点击事件里只改当前项：
this.list[index].isLiked = !this.list[index].isLiked，不要this.$set—— Vue 3 响应式代理下直接赋值即可 - 如果列表项来自 API，且后续会刷新，记得在重新赋值
this.list = newList时，保留用户操作过的状态（比如合并旧isLiked值）
状态样式与平台兼容性要注意的细节
uni-app 的 class 绑定在各端表现基本一致，但真机上有些 CSS 特性仍受限，尤其 iOS 微信小程序。
-
active类建议同时写transition: background-color 0.2s和transform: scale(0.98)，安卓和 iOS 都有反馈感 - 避免用
:active伪类做点击态——H5 有效，小程序里基本不触发 - 图标类按钮（如 ❤️ / ?）慎用 Unicode 字符，某些低端安卓机显示为方块；优先用
uni-icons或 svg - 微信小程序中，
button组件默认有灰色背景和边框，必须显式设plain="true"和hover-class="none"才能干净控制样式
真正难的不是怎么让按钮变色，而是状态如何随数据流同步、跨页面保持、以及刷新后不丢失——这些得靠合理的数据结构设计，而不是堆 watch 或 onShow。
