使用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做到这一点的任何方式吗?谢谢。
您可以使用元素的classList
property:
if (element.classList.contains('is-valid')) {
// Do something
}
如果你不需要IE9的支持,好的:https://caniuse.com/#search=classList –
是的,如果你确实需要'IE9'支持,你可以在我链接的页面上使用Polyfill。 – thanksd
大部分本地vue.js
功能涉及操作DOM,而不是DOM本身背后的数据。
有多种方法可以实现这一点,
您可以使用Vue类绑定,这是双向的。所以你一旦你初始化了绑定,那么你可以构建一个API来公开它。
你试过这个吗?
if (this.$els.elementNameHere.className.match(/\bmyclass\b/)) {
//
}
如果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就没有太大的危害。
另一件你可以用来使这段代码更类似Vue的元素是'ref':https://vuejs.org/v2/api/#ref – wostex