vue中@click绑定多个事件问题(教你避坑)
更新时间：2024年08月16日 12:10:20 作者：一只花小妖
这篇文章主要介绍了vue中@click绑定多个事件问题(教你避坑),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue中@click绑定多个事件
你可能还不知道，使用@click绑定多个事件的时候有一个小坑坑，因为刚刚我就遇到了，所以，为了你不再踩坑，我就将自己的经验分享给你
可能你在搜索如何使用vue中的@click绑定多个事件的时候，你会搜索到下边这种教程，也就是同时绑定一个表达式和一个方法的。
然后，他就会跟你说，绑定多个方法的时候，只需要在多个方法之间使用分号隔开即可。这个说法是完全没有问题的。
但是，有一点一定要记住，同时绑定多个方法的时候，非表达式的方法一定要加上小括号，如果你不加小括号，那么方法就一定不会生效的。
vue @click绑定的函数，如何同时传入事件对象和自定义参数
1、仅仅传入自定义参数
- html :
<div id="app"> <button @click="tm(123)">ddddd</button> </div>
- js :
new Vue({
el:'#app',
methods:{
tm:function(e){
console.log(e);
}
}
})则将会输出数字123
2、仅仅传入事件对象
- html：
<div id="app"> <button @click="tm">ddddd</button> </div>
- js :
new Vue({
el:'#app',
methods:{
tm:function(e){
console.log(e);
}
}
})则将会输入事件对象
3、同时传入事件对象和自定义参数
- html：
<div id="app"> <button @click="tm($event,123)">ddddd</button> </div>
- js：
new Vue({
el:'#app',
methods:{
tm:function(e,value){
console.log(e);
console.log(value);
}
}
})则将会输入事件对象
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
每次路由发生变化时都需要调用一次路由守卫，并且store中的数据会在每次刷新的时候清空，因此需要判断store中是否有添加的动态路由，本文给大家分享vue中根据用户权限动态添加路由的问题，感兴趣的朋友一起看看吧2021-11-11
本文主要介绍了Vue结合Element-Plus封装递归组件实现目录示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
在 vue 里我们可以通过全局事件总线来实现任意组件之间通信，它的原理是给 Vue 的原型对象上面添加一个属性。这样的话我所有组件的都可以访问到这个属性，然后可以通过这个属性来访问其他组件给这个属性上面绑定的一些方法，从而去传递数据2022-08-08
这篇文章主要为大家详细介绍了vue实现可增删查改的成绩单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要为大家介绍了Vue2 cube-ui时间选择器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
vue.js相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。下面通过本文给大家分享vue.js语法及常用指令，希望对大家有所帮助2017-10-10
这篇文章主要介绍了vue跳转页面携带参数并且立即执行方法,首先定义跳转函数,结合实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
这篇文章主要介绍了Vue2子组件绑定 v-model,实现父子组件通信方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue修改打包配置如何实现代码打包后的自定义命名，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
本文的初衷是想让更多哎学习的人知道并了解vue模版编译，所以文中主要以阶段流程为主，不会涉及过多的底层代码逻辑,需要的朋友可以参考一下2021-09-09
最新评论