如何处理 Vue js 中的样式类？

Question

我需要动态添加类并在需要时删除 我正在使用来自谷歌材料的 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'


) 

Answer 1

我在 Vue 中使用类绑定来应用动态类。你可以在这里看到doc。

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

举例

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