如何使用Vue.js将禁用状态灰色的按钮切换为启用状态的绿色

云原生阿岚

2026-9-25

问题根因

你的样式不生效是以下几个问题共同导致的：

CSS存在语法错误：.disabled规则后面有一个单独的.，属于无效语法，会干扰后续样式解析
优先级冲突：自定义.disabled类写在所有.ctaBtn_Start相关样式的最前面，后面的伪类、基础样式都会覆盖它的background属性
原生属性没有绑定：你在按钮上硬写了enabled和disabled两个冲突的原生属性，没有把disabled属性和校验状态绑定，导致浏览器原生的:disabled/:enabled伪类不会跟着业务状态变化
规则冗余冲突：同时写了:enabled伪类规则和自定义.disabled类规则，两套规则互相覆盖导致显示异常

修复方案

1. 修正CSS代码

删除无效语法，调整样式顺序，把状态样式放在基础样式之后保证优先级：

/* 自定义禁用类 */
.disabled {
  opacity: 0.4;
  background: grey;
}

/* 按钮基础样式（启用状态默认绿色） */
.ctaBtn_Start,
.ctaBtn_Start a:link,
.ctaBtn_Start a:visited {
  background: #049804;
  text-align: center;
  border-radius: 0.625rem;
  border: none;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  color: #ffffff;
  margin-bottom: 1.25rem;
  padding: 0.5rem 2rem;
  vertical-align: auto;
}

.ctaBtn_Start:hover {
  background: #00cc00;
}

/* 禁用状态样式，优先级高于基础样式 */
.ctaBtn_Start:disabled,
.ctaBtn_Start.disabled {
  background: grey;
  color: #ffffff;
  cursor: not-allowed;
}

2. 修正Vue绑定代码

删除硬写的enabled/disabled属性，同时绑定原生disabled属性和自定义类：

<button   
  class="ctaBtn_Start"    
  type="submit"
  :disabled="$v.$invalid || isLoading"
  :class="{ 'disabled' : $v.$invalid || isLoading }"
>
    Start
</button>