vue 事件处理函数的参数问题 ev的指向问题
之前有说过这样一个例子，回车或者点击添加新的任务；我们的处理方式是：绑定事件函数，然后进行相关处理；<inputtype="text"placeholder="例如:下午三点召开工作会议 ;"v-on:keyup.enter="addThingEnter"v-model="to...
·
之前有说过这样一个例子，回车或者点击添加新的任务；
我们的处理方式是：绑定事件函数，然后进行相关处理；
<
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=""
},
这样就可以了，可以同时获取传递的参数，还能获取事件对象；
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献11条内容
所有评论(0)