之前有说过这样一个例子,回车或者点击添加新的任务;
我们的处理方式是:绑定事件函数,然后进行相关处理;
<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=""
},
这样就可以了,可以同时获取传递的参数,还能获取事件对象;