Question

我想在输入字段上绑定一个类，假设要应用此类。在我的情况下，我有动态创建的输入字段，因为我无法将值与v-model绑定到动态创建的输入字段，所以我无法将该类与v-model数据绑定。这是我在v-for循环中创建的字段：

  <template v-for="input in ninjaForm.fields">
    <div class="control">
      <input
        class="input is-large"
        :class="{ hasValue: input.value }"
        :ref="input.label.toLowerCase()"
        :type="input.type"
        :name="input.label.toLowerCase()"
        :required="input.required == 1">
      <label>{{ input.label }}</label>
    </div>
  </template>

我想知道如何将该类与该输入字段绑定，以便我可以检查输入字段是否具有某种值，例如：

:class="{ 'has-value' : this.input.value != ''}"

我可以用Vue做到吗？

Answer 1

我认为您正在尝试class binding using the Object Syntax

在您的示例中，要应用CSS类hasValue，如果您的输入具有任何非麻烦的值，您将具有以下内容：

<input
  class="input is-large"
  :class="{ hasValue: input.value }"
  :ref="input.label.toLowerCase()"
  :type="input.type"
  :name="input.label.toLowerCase()"
  :required="input.required == 1">
<label>{{ input.label }}</label>

Vue类绑定在此输入字段上

1 个答案: