Javascript 在vue.js中输入无效时显示类：not（：empty）

如果vue.js中的输入：无效：非（：空），如何添加has error类

<div class="form-group">
  <input type="email" id="loginEmail" name="loginEmail" v-model="loginEmail" required>
  <label for="loginEmail">email</label>
  <div class="icon form">
    <icon name="email"></icon>
  </div>
</div>

此解决方案显示了一个类，但当我更改输入中的任何内容时，都不会重新刷新。此有错误类在此永久存在

已解决

input:not(:valid):not(:placeholder-shown) + label + .icon.form {
  svg {
    stroke: red;
  }
}

---

解决办法是如此简单，令人尴尬。我羞于不去想它。最后，它由CSS解析，而不使用vue.js来动态添加

样式类

，您需要将其作为

对象传递

注意如果相应的

值

为

真

<div :class = { 'has-error':loginEmail.checkValidity , 'has-success': true  } >

---

参考官方vue文档-

要动态添加

样式类

，需要将其作为

对象传递

注意如果相应的

值

为

真

<div :class = { 'has-error':loginEmail.checkValidity , 'has-success': true  } >

---

参考vue官方文档-

您需要编写以下内容

computed: {
    checkProperty: function () {
      if(checkValidity === true) return true;
      return false;
    }
  }

然后在你的html中你可以写

<div :class = { 'has-error':!checkProperty , 'has-success': checkProperty} >

---

您需要编写以下内容

computed: {
    checkProperty: function () {
      if(checkValidity === true) return true;
      return false;
    }
  }

然后在你的html中你可以写

<div :class = { 'has-error':!checkProperty , 'has-success': checkProperty} >

既然它是函数调用，那么它不应该是带括号的

loginEmail.checkValidity（）

吗？不，checkValidity是来自JS的函数，对我来说可以不带括号地工作。既然它是函数调用，那么它不应该是带括号的

loginEmail.checkValidity（）

吗？不，checkValidity是来自JS的函数，可以不带（）对我来说，别工作了，迪夫已经成功了。如果输入为空，我不需要类；如果输入无效，则需要错误类；如果输入有效，则需要成功。您需要创建一个

computed

属性来反映匹配项。我只是想告诉你如何动态地添加一个类。哦，我不是很精通这个，你能为我写这个方法吗？啊，这听起来更像是做作业，只是告诉你动态地创建类的正确方法。不工作，div已经成功完成了类的永久性。如果输入为空，我不需要类；如果输入无效，则需要错误类；如果输入有效，则需要成功。您需要创建一个

computed

属性来反映匹配项。我只是想告诉你如何动态添加一个类。我不是很精通这个，你能为我写这个方法吗？啊-这听起来更像是做作业，只是告诉你动态创建类的正确方法。虽然这确实解决了问题，但很难理解为什么。请考虑编辑你的答案，包括解释你改变了什么，为什么你改变了它，以及为什么它解决了问题。我不知道为什么，但是这不起作用。班级已经成功了，永远在这里。好吧，也许我错过了什么。你能告诉我你的loginEmail.checkValidity是什么吗？它只是纯JS的一个checkValidity（）函数。我的sideOk上没有写任何东西，也许这里最容易做的事情就是始终显示has success并在checkValidity返回false后添加has error，虽然这确实解决了问题，但很难理解为什么。请考虑编辑你的答案，包括解释你改变了什么，为什么你改变了它，以及为什么它解决了问题。我不知道为什么，但是这不起作用。班级已经成功了，永远在这里。好吧，也许我错过了什么。你能告诉我你的loginEmail.checkValidity是什么吗？它只是纯JS的一个checkValidity（）函数。我的sideOk上没有写任何内容，也许这里最简单的方法就是始终显示has success并在checkValidity返回false时添加has error