Vue的学习(五)

  • 时间:
  • 浏览:
  • 来源:互联网

Vue的学习(五)

v-on传参数

  • 当使用@click、@input之类可以传参的v-on绑定事件时,需要注意参数问题
    1. 如果该事件(方法)不需要额外参数,那么方法后面的()可以不添加。
      • 但是注意,如果在v-on:后双引号内的方法()或methods中定义的方法()内自带有一个参数,那么会默认将原生事件event参数传递进去
    2. 如果在需要传入某个参数时,同时需要原生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文本框
        }
    }
});

运行效果如下:

在这里插入图片描述


本文链接http://www.dzjqx.cn/news/show-617346.html