v-on参数传递

最新推荐文章于 2022-11-10 17:35:07 发布

jwz934738949

最新推荐文章于 2022-11-10 17:35:07 发布

阅读量4.2k

点赞数 6

分类专栏： Vue基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/107098205

版权

Vue基础专栏收录该内容

59 篇文章 1 订阅

订阅专栏

v-on可以传递click命令，代表点击事件，简写为@click

点击事件有三种情况：1.无参方法；2.有参方法；3.既需要参数，也需要浏览器产生的event事件

无参方法实现时，可以在调用方法时加入小括号，也可以不加小括号；
当方法有参数时，需要在调用方法时传入参数,当不写参数时默认为undefined。不写小括号，默认将浏览器产生的event事件传给方法；
当方法即需要参数,又需要event事件时，必须使用$event才可以返回事件；
当使用event时或者不写时返回undefined；
当方法中不填写任何值时，参数与evnet事件均为undefined;
当不填写小括号时，默认将event事件传入方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--无参方法实现时，可以在调用方法时加入小括号，也可以不加小括号-->
    <button @click="btnClick1()">无参方法实现1</button>
    <button @click="btnClick1">无参实现方法2</button>
    <!--当方法有参数时，需要在调用方法时传入参数,当不写参数时默认为undefined。不写小括号，默认将浏览器产生的event事件传给方法-->
    <br>
    <button @click="btnClick2('参数已传入')">有参方法实现1</button>
    <button @click="btnClick2()">有参实现方法2</button>
    <button @click="btnClick2">有参实现方法3</button>
    <!--当方法即需要参数,又需要event事件时，必须使用$event才可以返回事件-->
    <br>
    <button @click="btnClick3('方法已调用', $event)">传event方法1</button>
    <button @click="btnClick3('方法已调用', event)">传event方法2</button>
    <button @click="btnClick3('方法已调用')">传event方法3</button>
    <button @click="btnClick3($event)">传event方法4</button>
    <button @click="btnClick3()">传event方法5</button>
    <button @click="btnClick3">传event方法6</button>
</div>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        methods: {
            btnClick1() {
                console.log("无参函数实现")
            },
            btnClick2(param) {
                console.log(param);
            },
            btnClick3(param, event) {
                console.log(param, "\n", event)
            }
        }
    })
</script>
</body>
</html>

jwz934738949

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
v-on参数传递

v-on可以传递click命令，代表点击事件，简写为@click点击事件有三种情况：1.无参方法；2.有参方法；3.既需要参数，也需要浏览器产生的event事件无参方法实现时，可以在调用方法时加入小括号，也可以不加小括号；当方法有参数时，需要在调用方法时传入参数,当不写参数时默认为undefined。不写小括号，默认将浏览器产生的event事件传给方法；当方法即需要参数,又需要event事件时，必须使用$event才可以返回事件；当使用event时或者不写时返回undefined；当
复制链接

扫一扫

专栏目录