在 vue.js 中使用 hasClass

Posted 2023-02-22

【中文标题】在 vue.js 中使用 hasClass

【英文标题】：Using hasClass with vue.js

【发布时间】：2017-10-31 00:23:51

【问题描述】：

我知道我的这种设置并不理想，但是我需要检查输入元素的类。我刚刚开始在一个新项目中使用 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 做什么吗？谢谢。

【问题讨论】：

另一个可以让这段代码更像 Vue 的东西是 ref 元素：vuejs.org/v2/api/#ref

【参考方案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 并没有什么坏处。

【参考方案2】：

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

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

你试过了吗？

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

【参考方案3】：

你可以使用元素的classList property:

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

【讨论】：

如果你不需要 IE9 支持那么你很好：caniuse.com/#search=classList

是的，如果您真的需要 IE9 支持，可以在我链接的页面上使用 Polyfill。