將事件綁定到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>