将事件绑定到Vue.js中的多个元素

Question

是否可以将事件绑定到HTML中的多个元素而不使用组件。

例：

<ul> 
    <li> 
    <li> 
    <li> 
    <li> 
</ul> 

所以我可以绑定一个click事件到所有这些<li>元素。如果是，如何？

Answer 1

您可以使用事件委派。由于事件冒泡，您可以在ul元素上放置点击处理程序，它将触发点击任何包含的li s。在event对象中，target指示事件触发在哪个元素上，并且currentTarget指示处理程序连接到的元素。

new Vue({ 
 
    el: 'body', 
 
    methods: { 
 
    something: function(event) { 
 
     console.log('Clicked:', event.target.textContent); 
 
     console.log('Binding is on:', event.currentTarget); 
 
    } 
 
    } 
 
});

ul { 
 
    cursor: pointer; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> 
 
<ul @click="something"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
</ul>