在 vue.js 中使用 hasClass

Question

我知道我的这种设置并不理想，但是我需要检查输入元素的类。我刚刚开始在一个新项目中使用 Vue.js，但是我们有一个使用 jQuery 的表单验证库。

如果不符合某些验证要求，我正在使用的验证库会向输入添加一个类。

如果我使用的是 jQuery，我可以使用 hasClass 来检查输入元素是否具有特定的类。

在 Vue 中，我不确定如何检查元素是否具有类？

这是我想要实现的示例方法：

      methods: {
        nextStep: function() {
          const element = this.$el.querySelector("#conversation__tram-1 input");
          if (element has the class of is-valid) {
            Do something
          }

        },
      },

如您所见，我想检查输入字段是否具有is-valid 类。你能想到我可以用 Vue.js 做什么吗？谢谢。

Answer 1

如果已经涉及 jQuery，只需按照您已经知道的方式使用它的 hasClass。

    nextStep: function() {
      const element = this.$el.querySelector("#conversation__tram-1 input");
      if ($(element).hasClass('is-valid')) {
        Do something
      }
    },

Vue 不提供任何特殊的 DOM 操作例程，因为在 Vue 中，您通常不应该操作 DOM。有一些例外，但这并不是真正的例外。 :) 混合使用 jQuery 和 Vue 的关键是你必须小心separate what jQuery controls from what Vue controls，以免它们踩到对方的脚趾。只要您不希望 Vue 更新它，简单地读取 DOM 并没有什么坏处。

Answer 2

大多数本机vue.js 函数都涉及操作 DOM 背后的数据，而不是 DOM 本身。

有多种方法可以实现这一点，
您可以使用 Vue 类绑定，这是双向的。因此，一旦初始化绑定，您就可以构建一个 API 来公开它。

你试过了吗？

if (this.$els.elementNameHere.className.match(/\bmyclass\b/)) {
    //
}

Answer 3

你可以使用元素的classList property:

if (element.classList.contains('is-valid')) {
  // Do something
}