Vue中修饰符分几种?各有什么功能?

1.事件修饰符事件修饰符就是对具体某个事件进行修饰，用来处理某个DOM事件,常用的事件修饰符有以下几个：(prevent,stop,self,capture,once).prevent 阻止默认事件(在指定的事件后进行默认事件的阻止)<body><div id="app"><div class="box" @contextmenu...

软哈哈

3047人浏览 · 2019-12-28 09:43:27

软哈哈 · 2019-12-28 09:43:27 发布

1.事件修饰符

事件修饰符就是对具体某个事件进行修饰，用来处理某个DOM事件,常用的事件修饰符有以下几个：(prevent,stop,self,capture,once)

.prevent 阻止默认事件(在指定的事件后进行默认事件的阻止)

<body>
    <div id="app">
        <div class="box" @contextmenu.prevent="toggle()"></div>
    </div>
    <script>
        new Vue({
            el: "#app",
            methods: {
                toggle() {
                    console.log(1)
                }
            },
        })
    </script>
</body>

在这里插入图片描述
当添加了@contextmenu.prevent在盒子上再点击右键菜单就不会出现了

.stop阻止事件冒泡(在指定事件后阻止事件冒泡,阻止指定在最内层事件的标签里)

<body>
    <div id="app">
        <div class="box" @click="box">
            <div class="smallBox" @click.stop="smallBox"></div>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            methods: {
                smallBox() {
                    console.log(1)
                },
                box() {
                    console.log(2)
                }
            },
        })
    </script>
</body>

在这里插入图片描述
上述结果看出,在指定事件后使用阻止事件冒泡.stop后点击小盒子不在进行事件传递

.self (控制事件操作对象是自己本身的时候才起作用)

<body>
    <div id="app">
        <div class="box" @click.self="box()">
            <div class="smallBox" @click="smallBox()"></div>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            methods: {
                box() {
                    console.log('大盒子被点击了')
                },
                smallBox() {
                    console.log('小盒子被点击了')
                }

            },
        })
    </script>
</body>

上述结果与之前.stop效果一样,区别在于使用stop时是给小盒子使用,而使用self时给大盒子使用

.capture 捕获事件，它会改变事件冒泡的执行顺序 (先外后内)

<body>
    <div id="app">
        <div class="box" @click.capture="box()">
            <div class="smallBox" @click="smallBox()"></div>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            methods: {
                box() {
                    console.log('大盒子被点击了')
                },
                smallBox() {
                    console.log('小盒子被点击了')
                }

            },
        })
    </script>
</body>

在这里插入图片描述

.once 控制元素指定的事件只执行一次

<body>
    <div id="app">
        <div class="box" @click.once="box()">
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            methods: {
                box() {
                    console.log('大盒子被点击了')
                },
            },
        })
    </script>
</body>

给事件添加once后只会执行一次,上述代码点击大盒子只回会输出一次,再点击没有输出

2.表单元素修饰符

(number,trim,lazy)

number能够强制的指定表单元素的内容数据类型是number

<body>
    <div id="app">
        <input type="text" v-model.number="msg">
        {{msg}}
        <button @click="clickBtn">点击获取</button>
    </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: ""
            },
            methods: {
                clickBtn() {
                    console.log(typeof this.msg)
                }
            },
        })
    </script>
</body>

trim能够去除输入内容左右两边的空格

<body>
    <div id="app">
        <input type="text" v-model.trim="msg">
        {{msg}}
        <button @click="clickBtn">点击获取</button>
    </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: ""
            },
            methods: {
                clickBtn() {
                    console.log(this.msg)
                }
            },
        })
    </script>
</body>

在这里插入图片描述

lazy只有标签的change事件执行后才会执行数据的双向绑定

<body>
    <div id="app">
        <input type="text" v-model.lazy="msg" @input="input" @change="change">
        {{msg}}
    </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: ""
            },
            methods: {
                input() {
                    console.log('input事件执行了')
                },
                change() {
                    console.log("change事件执行了")
                }
            },
        })
    </script>
</body>

当没有使用lazy时,页面的显示的msg会实时监听输入框中的内容,只要发生改变,页面中显示的msg就会发生更新,但是当时用lazy后,在文本框中输入值后不再立马显示,只有当失去焦点触发change事件才进行显示

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}$/, //不连续的两位字母// /^