将按钮颜色从禁用的灰色更改为绿色答案

【问题标题】：Change a button color from being disabled grey to green将按钮颜色从禁用的灰色更改为绿色
【发布时间】：2021-12-31 01:56:32
【问题描述】：

我有以下脚本，我希望能够在启用后将按钮颜色从灰色（禁用时）更改为绿色。

我在我的 css 中添加了 disabled 和 enabled 属性，并使用了 vue.js（我是新手），但到目前为止它似乎没有从灰色变为绿色。而是保持浅绿色，然后是绿色。

这是我的脚本

CSS 和 HTML

   .disabled {
opacity: 0.4;
background:grey;
}

.
.ctaBtn_Start,
.ctaBtn_Start a:link,
.ctaBtn_Start a:visited {
background: pink;

/*   VARIABLE   */
text-align: center;
border-radius: 0.625rem;
border: none;
font-size: 1.5rem;
font-weight: 700;
cursor: pointer;
/*vertical-align: middle;*/
color: #ffffff;
margin-bottom: 1.25rem;
padding: 0.5rem 2rem;
vertical-align: auto;
}

.ctaBtn_Start:hover {
background: #00cc00;
/* VARIABLE */
}
.ctaBtn_Start:disabled,
button[disabled] {
background: yellow;
color: #ffffff;
}

.ctaBtn_Start:enabled,
button[enabled] {
background: #049804; // pink; // #006600;
// color: #049804;
}

 
// and HTML Button with vue.js binding to the css

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

【问题讨论】：

请附加当前结果，如果适用，请附加所需结果。

标签： html css vue.js

【解决方案1】：

尝试如下 sn-p:

new Vue({
  el: '#demo',
  data() {
    return {
      invalid: true,
      isLoading: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.invalid = false
      this.isLoading = false
    }, 3000)
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

.disabled {
  opacity: 0.4;
  background:grey;
}

.
.ctaBtn_Start,
.ctaBtn_Start a:link,
.ctaBtn_Start a:visited {
  background: pink;

  /*   VARIABLE   */
  text-align: center;
  border-radius: 0.625rem;
  border: none;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  /*vertical-align: middle;*/
  color: #ffffff;
  margin-bottom: 1.25rem;
  padding: 0.5rem 2rem;
  vertical-align: auto;
}

.ctaBtn_Start:hover {
  background: #00cc00;
/* VARIABLE */
}
.ctaBtn_Start:disabled,
button[disabled] {
  /*background: yellow;*/
  color: #ffffff;
}

.ctaBtn_Start:enabled,
button[enabled] {
  background: #049804; /* pink; // #006600;*/
  /*color: #049804;*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <button :disabled="invalid && isLoading" :enabled="!invalid && !isLoading" class="ctaBtn_Start"    
          type="submit"
          v-bind:class="invalid || isLoading ? 'disabled' : ''">
      Start
  </button>
</div>

【讨论】：

请在您的代码中添加一些解释。没有任何解释，人们更有可能复制和粘贴代码，而没有学到任何东西。
@ethry 你是完全正确的伙伴，但我不擅长解释，尤其是当代码太少而无法重现问题时，我只是在猜测。
如果你不能解释问题，至少解释一下你的解决方案。

【解决方案2】：

您可以做的是创建一个方法，例如 toggleColor() 并在您输入的按钮中：<button @click="toggleColor"></button>

在你写的函数中：

toggleColor() {color === !color}（切换颜色）

然后你把if (color = true) {set color 写成...}

希望对你有所帮助。

【讨论】：