Vue v-on标签的使用

最新推荐文章于 2025-06-15 11:27:40 发布

#Hideonbush

最新推荐文章于 2025-06-15 11:27:40 发布

阅读量619

点赞数

CC 4.0 BY-SA版权

分类专栏： vue笔记

本文链接：https://blog.youkuaiyun.com/weixin_41359273/article/details/109360717

vue笔记专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了 Vue.js 中 v-on 事件绑定的使用方法，包括基本语法、事件修饰符、如何传递参数等内容，并提供了多个实例帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.v-on标签主要是用于监听客户端的事件，比如鼠标点击，键盘按下抬起等等。
2.v-on绑定点击事件例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <h2>当前数：{{counter}}</h2><br>
<!--    <button v-on:click="counter++">加一</button>-->
<!--    <button v-on:click="counter&#45;&#45;">减一</button>-->
    <!--v-on标签的语法糖，用@代替v-on,@click-->
    <button @click="counter++">加一</button>
    <button @click="counter--">减一</button>
</div>
<script src="./vue.js"></script>
<script>
        const content = new Vue({
            el: '#content',
            data: {
                counter: 0
            }

        })
</script>
</body>
</html>

3.结果
在这里插入图片描述
4.v-on参数的问题
1）调用的方法没有参数时，可以写成@click="addOne"或者@click=“addOne()”,注意，如果addOne方法里有一个参数，即addOne(event),我们没有传参数时其会默认将原生的event对象传递过去
2）当我们想同时传自己的参数以及event对象时，可以通过$event来传递
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <h2>当前数：{{counter}}</h2><br>
    <button @click="addOne">加1</button>
    <button @click="addOne()">加1</button>
    <button @click="addFive(5)">加5</button>
    <button @click="addTen(10,$event)">加10</button>
</div>
<script src="./vue.js"></script>
<script>
        const content = new Vue({
            el: '#content',
            data: {
                counter: 0
            },
            methods: {
                addOne(event) {
                    console.log(event)
                    this.counter++
                },
                addFive(num) {
                    this.counter = this.counter + num
                },
                addTen(num,event) {
                   console.log(event)
                   this.counter = this.counter + 10
                }
            }

        })
</script>
</body>
</html>

结果，可以看到点击这两个按钮的地方，控制台均打印了原生的event对象
在这里插入图片描述
5.v-on修饰符
1）.stop,调用了event.stopPropagation(),阻止冒泡行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <h2>button数：{{bcounter}}</h2>
    <h2>div数：{{dcounter}}</h2>
    <div @click="dcounter++" style="height: 200px;width: 200px;background-color: red">
    <button @click.stop="bcounter++">点我加1</button>
    </div>
</div>
<script src="./vue.js"></script>
<script>
        const content = new Vue({
            el: '#content',
            data: {
                bcounter: 0,
                dcounter: 0
            },

        })
</script>
</body>
</html>

结果，冒泡行为已停止
在这里插入图片描述 2）.prevent,阻止默认行为，调用了event.preventDefault()
例子，阻止表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <form @submit.prevent action="">
        用户名:<input type="text" name="username" value=""/><br>
        密码:<input type="password" name="password" value=""/><br>
        <button type="submit">登陆</button>
    </form>
</div>
<script src="./vue.js"></script>
<script>
        const content = new Vue({
            el: '#content',
            data: {
            },

        })
</script>
</body>
</html>

没有阻止之前，登陆
在这里插入图片描述

阻止默认行为后，登陆
在这里插入图片描述
3）.once,只触发一次回调
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <button @click.once="btnClick">点我</button>
</div>
<script src="./vue.js"></script>
<script>
        const content = new Vue({
            el: '#content',
            data: {
            },
            methods: {
                btnClick() {
                    console.log('按钮事件。。。')
                }
            }
        })
</script>
</body>
</html>

结果，只执行一次
在这里插入图片描述
4）键修饰符，用于监听键盘
如下为监听回车键抬起和A键抬起例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <input @keyup.enter="enterFun" type="text"/><br>
    <input @keyup.A="oneFun" type="text"/>
</div>
<script src="./vue.js"></script>
<script>
        const content = new Vue({
            el: '#content',
            data: {
            },
            methods: {
                enterFun() {
                    console.log('enter事件触发')
                },
                oneFun() {
                    console.log('one事件触发')
                }
            }
        })
</script>
</body>
</html>

结果
在这里插入图片描述