Css 如果输入已填充，VueJS将更改输入的边框颜色

如果客户已经填写了字段，我需要更改输入的边框颜色

如何使用VueJS执行此操作

<div class="some-basic-div", '@change' => 'checkForInput'>
  <div class="dc-form-group ">
   <input type='text' id='first_name' >
  </div>
  <div class="dc-form-group ">
    <input type='text' id='last_name' >
  </div>
  <div class="dc-form-group ">
    <input type='text' id='some_text' >
  </div>
</end>

因此，当我更改输入时，我需要更改我填写的输入的样式。

使用

下面是一个简单的类绑定演示

Vue.config.productionTip=false
app=新Vue({
el:“应用程序”，
数据：{
测试值：“”
},
计算：{
computedInputStyleEnable:函数（）{//或使用一个方法而不是computed属性
//在这里应用您自己的逻辑来确定启用输入是否具有值样式
返回this.testValue&&this.testValue.length>0
}
},
方法：{
applyInputStyle:function（targetInput）{//bind与一个方法和返回数组
return[targetInput&&targetInput.length>0？“输入具有值样式”：“输入无值样式”]
}
}
})

。输入具有值样式{
边框：2倍纯绿；
背景颜色：浅绿色；
}
.输入无值样式{
边框：2倍纯红；
背景颜色：粉红色；
}

已填入{{testValue.length}}个字符

已填入{{testValue.length}}个字符

我编写了以下代码来处理此问题：

Vue.config.productionTip = false
app = new Vue({
 el: "#app",
 data: {
  testValue: ''
 }
},
  methods: {
    checkForInput: function(e){
      let input = event.target
      if (input.value != "") {
        input.classList.add("mod-group-success") ;
      } else {
        input.classList.remove("mod-group-success");
      }
    }
  }
})

并将其放在前端：

'@change' => 'checkForInput'

---

你能分享你迄今为止尝试过的代码吗？

'@change' => 'checkForInput'