javascript - 如何在Vue js中处理样式类？

我需要动态添加类，并在需要时删除
我正在使用Google材料中的texfield组件。如果文本输入未通过验证，则会出现错误，输入边框应为红色，并在其下方显示警告消息。一切正常后，绿色复选图标。下面的图片应该是这样。

所有文本都经过正则表达式验证，并存储在错误数组中（数据->文本字段->错误），这就是如果有错误我如何跟踪它。


这里是在出现错误时动态添加样式。问题是当我清除输入（空）'tf-error'类仍然带有红色边框时，但是我需要将其删除，就像添加类之前一样'tf-error'。我该怎么办？

gmcTextfield(
  v-for='(item, idx) in textfields'
  :key='idx'

  :inputId='"textfield-"+idx'
  label='item.label'
  :className=`['fs', [textfields[idx].errors ? 'tf-error' : '']]`


  :reference='item'
  refProp='value'

  :numOfErrorMsgs='item.numOfErrorMsgs'


)

最佳答案

我在Vue中使用类绑定来应用动态类。您可以在此处看到doc。

您为类定义绑定，并使用对象作为值，其中键是类，而值是布尔表达式。

举个例子

<ul>
  <li v-for="item in menuItems"
      v-on:click="selected = item"
      v-bind:class="{ selected: selected == item}">
     {{item}}
  </li>
</ul>

关于javascript - 如何在Vue js中处理样式类？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52347147/