Vue的学习(五)
v-on传参数
- 当使用@click、@input之类可以传参的v-on绑定事件时,需要注意参数问题
- 如果该事件(方法)不需要额外参数,那么方法后面的()可以不添加。
- 但是注意,如果在v-on:后双引号内的方法()或methods中定义的方法()内自带有一个参数,那么会默认将原生事件event参数传递进去
- 如果在需要传入某个参数时,同时需要原生event,可以通过$event传入事件
- 如果该事件(方法)不需要额外参数,那么方法后面的()可以不添加。
参考代码
- html
<div id="example">
<h1 @click="clickH1">
123
</h1>
<!-- 与click绑定的方法同样可以传参 -->
<!-- $event 是原生DOM事件 -->
<h1 @click="clickH2(456,$event)">
456
</h1>
<h1 @click="clickH2($event,789)">
789
</h1>
</div>
- vue
new Vue({
el:"#example",
methods:{
clickH1(e){
console.log(e.target.tagName) // 返回被点击事件的标签名
},
clickH2(e,event){
console.log(e);
console.log(event);
}
}
});
运行效果如下:点击123会打印出H1,点击456会先打印456再打印原生event,而点击789则相反,会先打印原生event再打印789,这也表明了原生event的打印顺序只与**$event**的所在位置有关
v-on:简单带参事件
- 应用数组进行简单的输入数据追加和显示
参考代码
- html
<div class="box">
<!-- v-on:keyup.enter 这里代表绑定了输入回车才会触发的事件 -->
<input v-on:keyUp.enter="on(123,$event)" :value="myInput"/>
<!-- 使用for循环遍历list数组 -->
<li v-for='item in list'>
<p>{{item.title}}</p>
</li>
</div>
- css
*{
margin:0;
padding:0;
list-style:none;
}
input{
display:block;
width:200px;
height:20px;
line-height:20px;
margin:8px auto;
}
li p{
width:200px;
height:50px;
line-height:50px;
margin:0px auto;
font-weight:bold;
}
- vue
var box = new Vue({
el: '.box',
data: {
// 创建list数组
list: [{title:123}],
myInput:""
},
methods: {
//data为传参,ev事件对象
on(data, ev) {
this.list.push({ //数据追加
title: ev.target.value //ev.target.value :输入框的值
});
this.myInput=""; // 回车之后清空input文本框
}
}
});
运行效果如下: