目录
上一节我们学习了用来生成列表结构的v-for指令,其中配合v-on指令实现了数据的增删,但是增删的逻辑是固定的,如果我们希望在执行逻辑的时候传递额外的参数,那么怎么办呢?
一、v-on指令补充
这一节我们来对v-on指令进行一些补充说明,讲解自定义参数以及事件修饰符的使用。
1、传递自定义参数
首先是自定义参数,顾名思义就是在触发事件的时候,可以传递自定义的值,写法和调用函数传参十分类似。
现在这里有一个绑定点击事件的按钮,触发的方法名叫做doit
如果想要传递参数,在后面加上括号,写上具体的值就可以啦。
相对应的在定义这个方法的时候,我们需要定义形参,去接收这个参数,那传递几个就写几个,两边都是相对应的。
接下来通过对应的形参,就可以获取到传递过来的参数值了。
2、事件修饰符
那么什么是事件修饰符呢?
这里有一个文本框,它绑定了一个按钮事件,对应的逻辑是sayHi,现在我们无论按下什么按钮,它都会触发这个sayHi,
但是实际上我们一般不是所有按钮都会触发,而是会限定某一些按钮,其中最常见的按钮就是回车键。
那相比于Vue,在之前我们可能用 jQuery或者JS,这个时候我们可能需要通过事件参数,来判定触发的按钮是什么,
才可以限制这个触发的时机,但是在Vue里面我们直接用事件修饰符就可以啦。语法是:点后面跟上修饰符
这里我们限制的是回车,我们加上一个点回车(.enter),这样我们只有在回车键的时候,才会触发这个逻辑。
当然事件修饰符不仅仅只有 enter 这一个,更多的可以参考地址:API — Vue.js 里面有很多常见的修饰符。
二、实例代码验证
1、v-on指令_传递自定义参数
(1)实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>16_v-on指令_传递自定义参数</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<input type="button" value="自定义参数_1个" @click="doItOne(666)">
<input type="button" value="自定义参数_2个" @click="doItTwo(666,'老铁')">
</div>
<script>
var app = new Vue({
el: "#app",
methods: {
doItOne: function (a1) {
alert(a1);
},
doItTwo:function(a1, a2){
alert(a1+a2);
}
},
})
</script>
</body>
</html>
(2)效果展示
2、v-on指令_事件修饰符
(1)实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>17_v-on指令_事件修饰符</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
文本框输入都会触发:<input type="text" @keyup="sayHi"><br>
文本框回车才会触发:<input type="text" @keyup.enter="sayHi">
</div>
<script>
var app = new Vue({
el: "#app",
methods: {
sayHi: function () {
alert("哈哈哈");
},
},
})
</script>
</body>
</html>