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文本框
        }
    }
});

运行效果如下：

---