vue 事件处理函数的参数问题 ev的指向问题

本文介绍Vue.js中如何使用事件绑定来处理用户输入,包括回车触发事件和点击按钮触发事件的具体实现方法,并解释了如何在事件处理器中正确接收事件对象。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

之前有说过这样一个例子,回车或者点击添加新的任务;


我们的处理方式是:绑定事件函数,然后进行相关处理;

<input
type="text"
placeholder="例如:下午三点召开工作会议 ;"
v-on:keyup.enter="addThingEnter"
v-model="todo"
>
<a href="#" v-on:click="addThingClick">立即添加</a>


new Vue({
el:"#con",
data:{
info:list,
todo:""
},
methods:{
addThingEnter(event){
this.info.push(
{title:event.target.value}
// {title:this.todo}
);
this.todo=""
},
addThingClick(){
this.info.push(
{title:this.$el.querySelector("input").value}
// {title:this.todo}
);
this.todo=""
}
}
});


我们可以看出在定义的函数没有传递参数的时候,也就是这样写的时候:

v-on:keyup.enter="addThingEnter"

我们在methods 下面的函数中的event指向的是事件对象,也就是下面这样,可以获取相应的值:

event.target.value 是可以获取的;



下面在看看如果传递参数是什么情况,我们给之前绑定的函数传递了一个参数"abc"

<input
type="text"
placeholder="例如:下午三点召开工作会议 ;"
v-on:keyup.enter="addThingEnter('abc')"
v-model="todo"
>


addThingEnter(event){
console.log(event)
// this.info.push(
// {title:event.target.value}
// {title:this.todo}
// );
// this.todo=""
},


这个时候可以看见输出的结果是我们的参数,而不是事件对象;event 的指向已经发生改变了;



但是如果我们还想获取这个事件对象怎么办呢?

那就再把事件对象作为参数传递进去:

<input
type="text"
placeholder="例如:下午三点召开工作会议 ;"
v-on:keyup.enter="addThingEnter('abc',$event)"
v-model="todo"
>


addThingEnter(data,event){
console.log(event)
console.log(data)
// this.info.push(
// {title:event.target.value}
// {title:this.todo}
// );
// this.todo=""
},


这样就可以了,可以同时获取传递的参数,还能获取事件对象;




评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值