Vue知识整理，让你快速入门Vue.js：03_11.本地应用：v-on指令补充（传递自定义参数、事件修饰符）

被开发耽误的大厨

已于 2022-06-06 23:33:37 修改

阅读量427

点赞数

分类专栏： web前端（H5）文章标签： vue.js javascript 前端

于 2020-03-22 23:38:10 首次发布

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/105035389

版权

web前端（H5）专栏收录该内容

83 篇文章 15 订阅

订阅专栏

上一节我们学习了用来生成列表结构的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>