vue学习之事件修饰符.stop|.prevent|.self|.once

v-on绑定事件使用v-on已经进行一些事件绑定, 最常用的比如click点击事件事件修饰符.stop阻止冒泡当多对标签进行重叠的时候, 你点击最上面的一层标签的时候, 会自动的冒泡到他下面的所有标签上面而.stop就是阻止冒泡使用的.prevent阻止默认事件在form表单提交时候或者在点击a标签的时候, 会阻止提交或跳转.self只当事件在该元素本身（比如不是子元素）触发时触发回调这个修饰符跟

蓝小白1024

7894人浏览 · 2020-12-18 09:44:58

蓝小白1024 · 2020-12-18 09:44:58 发布

`v-on`绑定事件

简写为@
使用v-on已经进行一些事件绑定, 最常用的比如click点击事件

事件修饰符

`.stop`

阻止冒泡

当多对标签进行重叠的时候, 你点击最上面的一层标签的时候, 会自动的冒泡到他下面的所有标签上面
而.stop就是阻止冒泡使用的

`.prevent`

阻止默认事件

在form表单提交时候或者在点击a标签的时候, 会阻止提交或跳转

`.self`

只当事件在该元素本身（比如不是子元素）触发时触发回调

这个修饰符跟.stop目的差不多,
.stop 是阻止点击到自己身上的点击事件冒泡到其它标签上
.self 是除非你直接点击到我标签本身, 不接受其它标签上面的点击事件冒泡到我身上的事件

`.once`

事件只触发一次

绑定后只会触发一次

下面为代码演示, 主要功能就是有一个遮罩层,

代码

<!--
File: demo_10_时间修饰符.html
Created Date: 2020-12-17 23:17:06
Author: 蓝小白
Contact: <lxb_wyf@163.com>
Last Modified: Thursday December 17th 2020 23:49:03 pm
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 导入本地的vue     -->
    <script src="/VUE/vue.js"></script>
    <!-- 下面遮罩层的样式 -->
    <style>
        #overlay{
            background: rgba(0, 0, 0, 0.6);
            width: 100%;
            margin: auto;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        #center {
            background: #ffffff;
            border-radius: 5px;
            /* 边框圆角 */
            padding-top: 15px;
            padding-left: 30px;
            padding-bottom: 15px;
            width: 290px;
            height: 160px;
            position: fixed;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    
    <div id="box">
        <!-- 修饰符 .prevent 会阻止默认行为,比如跳转 -->
        <br> <a href="http://www.baidu.com" @click.prevent>点击后不会跳转</a>
        <br><hr>
        <!-- 修饰符 .once 被绑定的事件只触发一次 -->
        <button @click.once="onceFunc"> 你只能点击一次 </button>
        <br><hr>
        <!-- 点击按钮后吧isShow的状态置位true -->
        <button @click="isShow=true">点击显示遮罩层</button>
        <!-- 这个div标签就是出现的遮罩层 -->
        <div id="overlay" v-show="isShow" @click="isShow=false">
             <!-- 这个div标签是在遮罩层上面显示的,当点击这个标签会冒泡到他下面的div
            这个时候就要使用 .shop 阻止冒泡行为 -->
            <div id="center" @click.stop>
                点击灰色部分会关闭遮罩层, <br>而点击白色部分这不会
                <hr>
                <div>用户名: <input type="text"></div>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                isShow:false,
            },
            methods:{
                onceFunc(){
                    alert("你没有机会在点了!!!")
                }
            }
        })
    </script>
    
</body>
</html>

注: 代码显示不一样注意一下vue.js是否导入

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^