Vue.js表单按钮如何根据禁用/启用状态动态切换对应颜色？

你已实现的disabled计算属性可直接复用来控制样式，两种常用实现方式如下：

方案1：动态绑定Class（推荐，易维护扩展） #

通过提前定义样式类，根据状态切换类名实现：

1. 新增样式类定义

.btn-disabled {
  background-color: lightgray;
  cursor: not-allowed;
}
.btn-enabled {
  background-color: green;
  color: #ffffff;
  cursor: pointer;
}
/* 可按需添加其他公共按钮样式 */

2. 修改按钮代码，绑定动态class

<button :disabled="disabled" :class="disabled ? 'btn-disabled' : 'btn-enabled'">Submit</button>

方案2：动态绑定Style（无需额外定义CSS） #

直接在标签上通过行内样式动态绑定，适合简单样式场景：

<button 
  :disabled="disabled" 
  :style="{
    backgroundColor: disabled ? 'lightgray' : 'green',
    color: '#fff',
    border: 'none',
    padding: '4px 12px',
    borderRadius: '4px',
    cursor: disabled ? 'not-allowed' : 'pointer'
  }"
>
  Submit
</button>

完整可运行示例（方案1版本） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<style>
.btn {
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
}
.btn-disabled {
  background-color: lightgray;
  cursor: not-allowed;
}
.btn-enabled {
  background-color: green;
  color: #ffffff;
  cursor: pointer;
}
</style>
<div id="form">
  <input type="text" v-model='name' placeholder="姓名"/>
  <input type="text" v-model='fname' placeholder="姓氏"/>
  <input type="text" v-model='phn' placeholder="手机号"/>
  <button 
    class="btn" 
    :disabled="disabled" 
    :class="disabled ? 'btn-disabled' : 'btn-enabled'"
  >
    提交
  </button>
</div>
<script>
new Vue({
  el: '#form',
  data: {
    name: '',
    fname: '',
    phn: ''
  },
  computed: {
    disabled(){
      return !this.name.trim() || !this.fname.trim() || !this.phn.trim();
    }
  }
})
</script>

注：示例中给disabled计算属性加了trim()处理，避免用户输入全空格时误判为已填写，不需要可以去掉。

内容的提问来源于stack exchange，提问作者Inayat Kazi