结论是：用 v-for 渲染按钮列表 + :class 动态绑定状态类名 + @click 切换数据字段，是最轻量、最可控、多端兼容性最好的方式；应避免依赖原生 button 的 disabled/active 伪类，因其在小程序和 H5 中表现不一致。
直接说结论：用 v-for 渲染按钮列表 + :class 动态绑定状态类名 + @click 切换数据字段，是最轻量、最可控、多端兼容性最好的方式。别碰原生 button 的 disabled/active 伪类，uni-app 里它们在小程序和 H5 表现不一致。
怎么用 v-for 渲染带状态的按钮列表
核心是把「按钮状态」当作数据字段管理，而不是靠 DOM 属性或 CSS 类硬编码。比如每个按钮对应一个对象，含 text、status、disabled 等字段：
data() {
return {
buttons: [
{ id: 1, text: '待审核', status: 'pending', disabled: false },
{ id: 2, text: '已通过', status: 'approved', disabled: true },
{ id: 3, text: '已驳回', status: 'rejected', disabled: false }
]
}
}
模板中用 v-for 遍历，:class 绑定状态类名：
<view v-for="btn in buttons" :key="btn.id">
<button
:class="['btn', `btn--${btn.status}`, { 'btn--disabled': btn.disabled }]"
@click="handleClick(btn.id)"
:disabled="btn.disabled"
>{{ btn.text }}</button>
</view>
- 每个按钮的样式由
btn.status决定，比如btn--pending控制橙色背景 -
:disabled是保险项，防止用户误点禁用态按钮（尤其在小程序里，光靠 class 不拦截点击） - 不要用
index做 key，用唯一id，否则状态更新时容易错乱
status 字段怎么映射到颜色和行为
状态不是写死在模板里的字符串，而是和业务逻辑强关联的标识。比如「进行中」按钮要显示倒计时、「已取消」按钮要置灰且不可点：
- 在
methods.handleClick里根据btn.status分支处理，而不是统一跳转 - 颜色建议抽成 CSS 变量或 SCSS map，避免写一堆
btn--xxx类；例如：.btn--pending { background-color: var(--color-orange); } - 如果某状态需动态内容（如倒计时），不要在按钮上直接插值，而是在按钮内嵌一个子组件或
view，单独控制其显隐和更新逻辑 - 注意：H5 端
button的disabled会触发opacity变化，但小程序不会，所以必须靠 class 主动加btn--disabled控制样式
为什么不用 uni-button 或第三方状态按钮组件
多数封装好的状态按钮组件（比如 uni-button）只暴露 type、disabled 等基础属性，无法灵活支持「同一按钮在不同状态下显示不同文字+不同图标+不同点击行为」这种真实业务场景：
-
uni-button的type值固定为primary/default等，没法映射到「待开始」「已完成」这类业务状态 - 它的
loading状态是布尔值，但实际中你可能需要「加载中（带文字）」「加载失败（带重试图标）」两种子态 - 在 iPad 或横屏安卓设备上，
uni-button的尺寸和圆角经常失真，不如自己用view+text+image组合可控 - 如果你真要用，至少把它的
class和style全部透传出去，否则定制成本反而更高
真正容易被忽略的是：状态切换后，按钮的视觉反馈（比如点击态 active 样式）在 iOS 小程序里默认不生效，必须手动加 -webkit-tap-highlight-color: transparent，且不能只写在 button 上——要写在包裹它的最外层 view 上，否则点击区域判断会出错。
