vue之v-on的用法(v-on修饰符)

最新推荐文章于 2024-04-30 15:37:43 发布

微微笑再加油

最新推荐文章于 2024-04-30 15:37:43 发布

阅读量3.3k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/chd_sun/article/details/104328332

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.stop修饰符
当我们使用点击按钮的时候，会遇到个别问题，比如在一个div区域之内绑定了点击事件而在这个区域之内绑定了一个按钮的点击事件，例子如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../vue.js/vue.js"></script>
<body>
    <div id="app">
    //div区域内绑定一个点击事件
    div区域点击事件
        <div @click="divClick">
        	//div中按钮的绑定事件
            <button @click="btnClick">点击</button>
        </div>

    </div>
    <script>
     const app= new Vue({
        el: '#app',
        data: {
          
        },
        methods:{
            divClick(){
                console.log("divClick");
            },
            btnClick(){
                console.log("btnClick");
            },
          
        }
    })

    </script>
</body>
</html>

会发现一个问题，点击按钮的时候，同时也会触发div的点击事件
在这里插入图片描述
怎么阻止呢？只需要一个stop的修饰

 <button @click.stop="btnClick">点击</button>

代码加上stop修饰符之后，再点击按钮的时候就不会触发div的点击事件
在这里插入图片描述
2.prevent修饰符(阻止默认事件)
例如form表单的提交，现在有个需求需要手动提交，不需要默认提交在监听点击事件后面加上prevent修饰符

<form action="baidu">
            <input type="submit" value="提交" @click.prevent="submitClick">
        </form>

 methods:{
            submitClick(){
                console.log("submitClick");
            },
        }

显示阻止了form表单自动提交，自己手动提交信息
在这里插入图片描述
3.监听某些按键的事件
keyup：当按键抬起之时触发事件
keydown:当按键按下之时触发事件

<input type="text" @keyup="keyup">

 methods:{
            keyup(){
                console.log("keyup");
            },
        }

输入框之中输入数据之后触发keyup事件
在这里插入图片描述
回车按键：enter修饰符
当输入一些信息之后，按下回车才能触发事件

<input type="text" @keyup.enter="keyup">

 methods:{
            keyup(){
                console.log("keyup");
            },
        }

输入之后，keyup监听事件没有反应，当按下回车之后则会触发监听事件
在这里插入图片描述

3.native(监听自定义组件)
当我们自定义组件时候需要监听自定义组件之时，@click则不会起到监听作用

//当监听不是原生的组件时候，而是自定义组件的时候则需要native修饰
<cpn @click.native="cpn">自定义组件</cpn>

4.once（只触发一次）

 <!-- once修饰符 -->
        <button @click.once="onceBtn">只能点击一次</button>

点击多次，只会触发一次
在这里插入图片描述

微微笑再加油

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue之v-on的用法(v-on修饰符)

1.stop修饰符当我们使用点击按钮的时候，会遇到个别问题，比如在一个div区域之内绑定了点击时间而在这个区域之内绑定了一个按钮的点击事件，例子如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont...
复制链接

扫一扫