将hasClass与vue.js一起使用

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

您可以使用元素的classList属性 ：

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

Answer 2

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

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

你试过这个吗？

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

Answer 3

如果已经涉及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的关键是你必须小心地将jQuery控件与Vue控件分开，这样他们就不会互相踩到脚趾。 只要您不希望Vue更新它，只需简单地读取DOM就没有太大的危害。