如何为 Class In Vue.js 设置方法

Question

你知道我们可以在 JQuery 中使用 class 事件。例如

$(".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 或表单设置相同的功能。我想为一个函数设置一个 class 并为 class 设置一个方法。

有什么解决办法吗？

Answer 1

我会为 <ol> 和 <ul> 编写一条指令，为所有 <li> children.

添加点击处理程序

类似于：

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>

Answer 2

大卫的回答很好。但是如果你不想使用 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 + '.');
        }
    }
});

如何为 Class In Vue.js 设置方法

How to Set A Methods For A Class In Vue.js

javascript

jquery

vue.js