vue控制登录按钮禁用，背景颜色变化

先上图：

想要实现的功能：当两个输入框都不为空的时候，登录按钮颜色高亮，并且可以触发点击事件，否则，登录按钮变暗，不能触发提交等等事件
思路：
登录按钮的颜色变化和禁用状态都是依赖于两个输入框的value值的变化，由于这种依赖关系，我们可以选择用computed和watch来监听两个输入框的变化，由于不需要经过中间状态，所以我们选用更简便的computed属性来实现
主要代码：

html:

<input  type="text"  placeholder="请输入用户名/手机号" v-focus v-model="uname">
  <input type="password" placeholder="请输入密码" v-model="upwd">
  <--绑定disabled属性和class属性-->
  <button :disabled="btnState==false" :class="{btnBg:btnState}" @click="sendAjax"></button>

js:

export default {
    data(){
        return{
            uname:"",
            upwd:"",
        }
    },
   computed:{
       btnState(){//当用户名和密码框都不为空时btnState==true,利用这个计算属性来动态控制按钮的禁用和颜色
           return this.uname!==""&&this.upwd!==""
       }
   }

}

css:

/*button禁用时的背景颜色*/
button{
background:#9ECB9A;
}
/*button可用时的背景颜色*/
.btnBg{
background:green;
}

要点：
计算属性btnState返回的结果依赖于两个输入框的变化，当都不为“”时，btnState为true，按钮应该高亮显示的。正好可用于绑定class的判断条件，要使disabled为false才解除禁用，那么可让btnState==false就可以得到一个结果为false的表达式。