vue中@click绑定多个事件问题(教你避坑)

2024-08-16 11:57:26 作者：一只花小妖

这篇文章主要介绍了vue中@click绑定多个事件问题(教你避坑),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue中@click绑定多个事件

你可能还不知道，使用@click绑定多个事件的时候有一个小坑坑，因为刚刚我就遇到了，所以，为了你不再踩坑，我就将自己的经验分享给你

可能你在搜索如何使用vue中的@click绑定多个事件的时候，你会搜索到下边这种教程，也就是同时绑定一个表达式和一个方法的。

然后，他就会跟你说，绑定多个方法的时候，只需要在多个方法之间使用分号隔开即可。这个说法是完全没有问题的。

但是，有一点一定要记住，同时绑定多个方法的时候，非表达式的方法一定要加上小括号，如果你不加小括号，那么方法就一定不会生效的。

<div id="app">
  <button @click="tm(123)">ddddd</button>
</div>

new Vue({
    el:'#app',
  methods:{
      tm:function(e){
        console.log(e);
    }
  }
})

则将会输出数字123

<div id="app">
  <button @click="tm">ddddd</button>
</div>

new Vue({
    el:'#app',
  methods:{
      tm:function(e){
        console.log(e);
    }
  }
})

则将会输入事件对象

<div id="app">
  <button @click="tm($event,123)">ddddd</button>
</div>

new Vue({
    el:'#app',
  methods:{
      tm:function(e,value){
        console.log(e);
        console.log(value);
    }
  }
})

则将会输入事件对象

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。