如何在Vue.js中为一个类设置方法
How to Set A Methods For A Class In Vue.js
你知道我们可以在JQuery中为类使用on事件。例如
$(".example").click(function(){
//the process
})
我是Vue.js的新手,我正在Vue.js中的方法上工作我们使用v-on属性为元素设置一个方法。但是我不想为所有使用相同函数的元素定义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>
你必须看到,我使用v-on attr所有的li元素。对于li元素,这不是问题,我可以解决它v-repeat,但在某些情况下,我必须为许多div或形式设置相同的函数。我想为一个函数设置一个类,并为这个类设置一个方法。
有什么解决办法吗?
大卫的回答很好。但是如果你不想使用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>
相关文章:
- 将一个方法转换为promise:Nodejs
- 如何在所有ng点击事件AngularJS上启动一个方法
- 创建一个方法,通过一个窗口进行迭代并获取Titanium中的所有控件
- 如何创建一个方法来验证数组的范围
- 如何将一个方法延迟到另一个方法首先完成,javascript
- 在Javascript中对类的每个实例调用一个方法
- 如何重写一个方法,并且仍然能够在重写的方法中使用基方法
- NodeJS-从同一文件中的另一个方法调用一个方法
- 有没有任何情况下,一个方法不应该是原型方法
- Jasmine间谍的函数称为一个方法
- 在带有参数列表的表单submit上调用一个方法
- 方法不在另一个方法内部调用
- 在 1 个方法中增加变量值会触发另一个方法的 for 循环,欢迎任何建议
- 如何使用javascript express node将变量从控制器中的一个方法公开.js到另一个控制器.js
- 如何在javascript中将变量的值分配给另一个方法
- 在浏览器关闭时,单击确认对话框中的“停留在页面上”,执行一个方法
- 使用一个方法在c#中启动其他方法
- 如何在Ember中转换到另一个路由时调用一个方法
- 在typescript中重载一个方法
- 我可以在setInterval函数中放入一个方法作为参数吗