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

Question

我需要动态添加类，并在需要时删除 我正在使用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'


) 

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>