详解vue中的事件处理什么时候传递事件对象，什么时候传递数据

最新推荐文章于 2024-04-03 08:36:50 发布

前端神棍

最新推荐文章于 2024-04-03 08:36:50 发布

阅读量460

点赞数 3

文章标签： vue js

本文链接：https://blog.csdn.net/m0_46412825/article/details/108392788

版权

大家先看一下代码，详解在下面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--<button v-on:click="f">登录</button>-->
    <button @click="f1">登录1</button> <br>
    <button @click="f2()">登录2</button><br>
    <hr>
    <button @click="f3">登录3</button> <br>
    <button @click="f4()">登录4</button><br>
    <hr>
    <button @click="f5">登录5</button> <br>
    <button @click="f6(1,2)">登录6</button><br>
    <hr>
    <button @click="f7(6,8,$event)" id="btn">登录7</button><br>
    <hr>
    <div class="plane">
        <h3>标题<span @click="isShow = !isShow">{{isShow ? "收起" : "展开"}}</span></h3>
        <div v-show="isShow" style="width: 200px; height: 200px;background: red">这是一个盒子</div>
    </div>
    <a href="" @click.prevent="f8">百度一下~</a>
</div>
<script>
    /*document.getElementById("btn").onclick = function(){  无效了
        console.log("哈哈哈")
    }*/
    let vm = new Vue({
        el:"#app",
        data:{
            isShow:true
        },
        methods:{
            f1(){  console.log("f1点击了...")  },
            f2(){  console.log("f2点击了...")  },
            f3(e){  console.log("f3点击了...:",e)  },
            f4(e){  console.log("f4点击了...:",e)  },
            // f5调用时，没有加()，函数定义处的第1个参数代表事件对象
            f5(a,b){  console.log("f5点击了...:",a,b)  },
            f6(a,b){  console.log("f6点击了...:",a,b)  },
            f7(a,b,e){  console.log("f7点击了...:",a,b,e)  },
            f8(){  console.log("a标签的点击事件")  }
        }
    })
</script>
</body>
</html>

运行结果如下：

分析如下：
vue中的事件处理：
通过v-on指令实现事件绑定登录
可以简写：<button @click="f">登录</button>

1)对于绑定事件的监听器可以加()，也可以不加()：
<button @click="f1">登录1</button> <br> <button @click="f2()">登录2</button>

2)如何得到事件对象：
<button @click="f3">登录3</button>
f3不加() 方法中第1个参数就代表事件对象
<button @click="f4()">登录4</button>
绑定时如果加了() 方法定义处第1个参数就不代表事件对象
f3(e){ console.log("f1点击了...:",e) }, f4(e){ console.log("f2点击了...:",e) }

3)参数传递：
<button @click="f5">登录5</button>
不加() 不能传递数据
<button @click="f6(1,2)">登录6</button>
加(),可以传递数据
f5(a,b){ console.log("f5点击了...:",a,b) }, f6(a,b){ console.log("f6点击了...:",a,b) },
4)需要事件对象，还需要传递，怎么做？
<button @click="f7(6,8,$event)">登录7</button>
f7(a,b,e){ console.log(“f7点击了…:”,a,b,e) }