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

您可以使用元素＆＃39; classList property：

Date

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的关键是你必须小心separate what jQuery controls from what Vue controls，这样他们就不会踩到彼此的脚趾。只要您不希望Vue更新它，只需阅读DOM就不会有太大的危害。

将hasClass与vue.js一起使用

3 个答案: