Vue中v-on的使用

最新推荐文章于 2024-06-21 08:47:39 发布

DangR-Jisoo

最新推荐文章于 2024-06-21 08:47:39 发布

阅读量586

点赞数

分类专栏： Vue 前端

本文链接：https://blog.csdn.net/Angela_Connie/article/details/114295538

版权

前端同时被 2 个专栏收录

45 篇文章 2 订阅

订阅专栏

Vue

18 篇文章 2 订阅

订阅专栏

Vue中v-on的使用

v-on的介绍

作用：绑定事件监听器
缩写：@
参数：event

小案例(点击+数字加一，点击-数字减一)

<body>
    <div id="app">
        <h2>{{counter}}</h2>
        <button @click="add()">+</button>//绑定add()函数
        //也可以<button v-on:click="count++">+</button>
        //<button v-on:click="count--">-</button>
        <button @click="sub()">-</button>//绑定sub()函数
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                counter: 0
            },
            methods: {
                add() {
                    this.counter++;//切记使用this
                },
                sub() {
                    this.counter--;
                }
            },
        })
    </script>
</body>

在这里插入图片描述
3. v-on的参数传递问题

若v-on绑定的方法不需要额外参数，那么调用方法时()可以不添加，但是如果方法本身有一个参数，那么会默认将原生事件event传递进去
如果需要传入某个参数，同时需要event时，可以通过$event传入事件

4 v-on的修饰符

.stop(调用event.stopPropagation())阻止事件冒泡
.prevent(调用event.preventDefault())阻止事件默认行为
.keyCode|.keyAlias(只当事件是从特定键触发时才触发回调)
.native(监听组件根元素的原生事件)
.once(只触发一次回调)
例如：拿.stop来举例

<body>
    <div id="app" @click="btnClick">
        <h2 @click="btnClick">{{message}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊",
            },
            methods: {
                btnClick() {
                    alert('你点了我');
                }
            },
        })
    </script>
</body>

当点击<h2>标签时，由于绑定了btnClick()方法，此时会弹出"你点了我"，由于<div>也绑定了btnClick()方法，且<div>是<h2>的父元素，因此在点击<h2>之后会发生事件冒泡，即会弹出两个"你点了我"这四个字，为了阻止冒泡事件的发生，在<h2 @click="btnClick">{{message}}</h2>添加.stop来阻止，即<h2 @click.stop="btnClick">{{message}}</h2>

DangR-Jisoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中v-on的使用

Vue中v-on的使用v-on的介绍作用：绑定事件监听器缩写：@参数：event小案例(点击+数字加一，点击-数字减一)<body> <div id="app"> <h2>{{counter}}</h2> <button @click="add()">+</button>//绑定add()函数 //也可以<button v-on:click="coun
复制链接

扫一扫

专栏目录