首页 文章

Vue类绑定在此输入字段上

提问于
浏览 次
1

我想在输入字段上绑定一个类，假设要应用此类 . 在我的情况下，我有输入字段，我动态创建，因为我可以't bind values with v-model for input fields that are dynamically created I can'绑定类与 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做到吗？

vuejs2

1 回答

  • 1

    我想你正试图做一个class binding using the Object Syntax

    在您的示例中，要应用CSS类 hasValue ，如果您的输入具有任何值，那么't falsy, you' ll具有以下内容：

    <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>
    回复于

相关问题