判断输入框是否有值,没值按钮是灰色,有值是橙色
<el-input v-model="inputList.nameinput"></el-input>
<!-- 提交按钮 -->
<div @click="Submit" :style="activeStyle" class="btn">确认提交</div>
return{
inputList: {
nameinput: "",
}
activeStyle: {
color: "black",
background: "#ddd",
},
}
// 计算属性
computed: {
changeData() {
const {nameinput}=this.inputList
return nameinput
// 如果值比较多
//return {nameinput}
}
},
// 侦听器
watch: {
changeData: {
handler(newValue, oldValue) {
if (newValue.nameinput ) {
this.activeStyle.color = "#fff";
this.activeStyle.background = "red";
} else {
this.activeStyle.color = "black";
this.activeStyle.background = "#ddd";
}
},
},
},
// 提交
Submit() {
console.log("我变色了")
}