使用hasClass与vue.js

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

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

如果我使用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做到这一点的任何方式吗？谢谢。

来源

2017-05-30 Nick Maddren

另一件你可以用来使这段代码更类似Vue的元素是'ref'：https://vuejs.org/v2/api/#ref – wostex

您可以使用元素的classList property：

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

来源

2017-05-30 13:33:10 thanksd

如果你不需要IE9的支持，好的：https://caniuse.com/#search=classList –

是的，如果你确实需要'IE9'支持，你可以在我链接的页面上使用Polyfill。 – thanksd

大部分本地vue.js功能涉及操作DOM，而不是DOM本身背后的数据。

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

你试过这个吗？

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

来源

2017-05-30 13:41:48

如果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就没有太大的危害。

来源

2017-05-30 14:37:42

使用hasClass与vue.js

回答

相关问题