Question

所以我使用名为vuetify的Vue2组件框架，我对输入文本框的类有疑问。

所以在文本框组件中，代码是：

<template lang="pug">
  div(
    class="input-group"
    v-bind:class="classes"
  )
    label(
      v-bind:for="id"
      v-html="label"
    )
    input(
      v-bind:id="id"
      v-bind:name="name"
      v-bind:placeholder="placeholder"
      v-bind:required="required"
      v-bind:type="type"
      v-bind:value="inputValue"
      ref="input"
    )
</template>

现在我想在文本输入中添加一个类，因为我希望它是一个日期，我正在使用flatpickr插件。这个班的名字是flatpickr。所以我使用组件的方式是这样的：

<v-text-input id="someID" label="SomeLabel" v-model="someModel"></v-text-input>

如果我尝试随机添加该类，我会这样做：

<v-text-input id="someID" label="SomeLabel" v-model="someModel" class="flatpickr"></v-text-input>

代码无效，因为该类转到了div。我检查了chrome元素中生成的代码，它看起来像这样：

<div class="input-group flatpickr" data-v-3eb87e8e="">
   <label for="SomeLabel">SomeLabel</label>
   <input id="someID" type="text">
</div>

如您所见，该课程将转到div的课程。在文本输入中添加类的最佳方法/技巧是什么？任何帮助将不胜感激。

Answer 1

您可以通过提供输入路径来应用相同的CSS属性，如下所示：

.random input{
    height: etc;
}

修改

鉴于您也获得了输入框的id，要在特定输入上应用该类，您还可以使用id：

.random #someid{ height: etc; }

Answer 2

将类添加到<div>标签中是Vue的设计，添加到组件中的类将呈现到模板中元素的顶层。

https://vuejs.org/v2/guide/class-and-style.html#With-Components

如果您想将CSS应用于<input>，您只需执行以下操作：

.random input {
  /* your css style */
}

如果您想将flatpickr与vuejs一起使用，可以尝试使用此vue-flatpickr组件，https://github.com/jrainlau/vue-flatpickr

如何在VueJS中添加具有相同名称的属性？

2 个答案: