[英]How to Set A Methods For A Class In Vue.js
你知道我们可以在JQuery中使用一个类的事件。 例如
$(".example").click(function(){
//the process
})
我是Vue.js的新手,我正在研究vue.js中的方法Vue使用v-on attr来设置元素的方法。 但我不想为所有使用相同功能的元素定义attr。
例如
<ul class="container">
<li v-on="click:Menu" >Menu 1</li>
</ul>
<ol class="click">
<li v-on="click:Menu" >Menu 1</li>
<li v-on="click:Menu" >Menu 2</li>
</ol>
你必须看到,我在所有li元素上使用了v-on attr。 对于li元素它没有问题,我可以解决它的v-repeat但是在某些情况下,我必须为很多div或form设置相同的函数。 我想为函数设置一个类,并为该类设置一个方法。
它有什么解决方案吗?
大卫的回答很好。 但是如果您不想使用Jquery,则可以使用document.querySelectorAll而不是$(this.el).find(“li”),然后在指令中添加带有addEventListener的单击处理程序。
话虽如此,您不必向指令中的所有元素添加事件侦听器(即使指令可能是最佳解决方案)。 另一种方法是执行您的建议,将处理程序放在父元素上,然后根据调用函数的元素实现某些逻辑。 例:
https://jsfiddle.net/q7xcbuxd/33/
<div id="app">
<ul class="UL_items" v-on="click:Menu(1)">
<li>Menu 1 item 1</li>
</ul>
<ol class="OL_items" v-on="click:Menu(2)">
<li>Menu 2 item 1</li>
<li>Menu 2 item 2</li>
<li>Menu 2 item 3</li>
</ol>
<div class="DIV_items" v-on="click:Menu(3)">
lots<br/>
of<br/>
items<br/>
</div>
</div>
var vue = new Vue({
el: '#app',
methods: {
Menu: function(id){
console.log('You invoked function Menu' + id + ' ' +
'by clicking on ' + event.path[0].innerHTML + ' ' +
'which is of type ' + event.srcElement.nodeName + '.\n' +
'The parent element\'s class name is \'' + event.srcElement.parentElement.className + '\' ' +
'which is of type ' + event.srcElement.parentElement.nodeName + '.');
}
}
});
我会为<ol>
和<ul>
编写一个指令,为所有<li>
子项添加点击处理程序。
就像是:
Vue.directive('menu', {
bind: function () {
$(this.el).find("li").on("click", function (event) {
this.menu_click(event);
});
},
update: function (value) {
this.menu_click = value;
},
unbind: function () {
$(this.el).find("li").off("click", this.menu_click);
}
})
并像这样使用它:
<ul class="container" v-menu="container_click">
<li>Menu 1</li>
</ul>
<ol class="click" v-menu="click">
<li>Menu 1</li>
<li>Menu 2</li>
</ol>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.