表单修饰符和事件修饰符

表单修饰符和事件修饰符

表单修饰符

v-model.lazy

v-model.lazy 失去焦点后再收集数据

<div id="app">
        <textarea name="" id="" cols="30" rows="10" v-model.lazy="a"></textarea>
        {{a}}
        <textarea name="" id="" cols="30" rows="10" v-model="b"></textarea>
        {{b}}
    </div>

Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return { a: "", b: "" }
        } 
    })

在这里插入图片描述

v-model.number

v-model.number 有效转换为数字如 "1" 转为 1 数字

<div id="app">
	<input type="text" v-model.number="num">
    <input type="text" v-model="nums" value="">
    <button @click="func()">点击</button>
</div>

Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return { num: "", nums: "" }
        },
        methods: {
            func() {
                console.log(typeof this.num);
                console.log(typeof this.nums);
            }
        }
    })

在这里插入图片描述

v-model.trim

v-model.trim 过滤首尾空格

<div id="app">
	<input type="text" v-model.trim="num">
</div>

Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return { num: ""}
        }
    })

在这里插入图片描述

事件修饰符

.prevent

prevent 阻止默认事件如移动端的下拉刷新事件 form的默认提交刷新事件 a链接刷新事件

<form action="" @submit.prevent></form>
<a href="http://baidu.com" @click.prevent></a>

.stop

stop 阻止冒泡事件

 <div @click="func2()" class="box1">
            1
            <p @click="func3()" class="box2">
                2
                <span @click.stop="func4()" class="box3">3</span>
            </p>
        </div>

Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return {}
        },
        methods: {
            func2(){
            	console.log("div元素");
            },
            func3(){
            	console.log("p元素");
            },
            func4(){
            	console.log("span元素");
            },
        }
    })

在这里插入图片描述

拓展：阻止冒泡的几种方法

addEventListnener设置为true
.stop
event.stopPropagation

.once

once 只触发一次

 <div @click.oncek="func1()" class="box1"> </div>

Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return {}
        },
        methods: {
            func1(){
            	console.log("div元素,但只能触发一次");
           }
        }
    })

.capture

capture 打乱冒泡顺序，先触发带有此修饰符的元素，若有多个此修饰符，则由外向内触发捕获效果

 <div @click="func2()" class="box1">
            1
            <p @click.capture="func3()" class="box2">
                2
                <span @click="func4()" class="box3">3</span>
            </p>
        </div>

Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return {}
        },
        methods: {
            func2(){
            	console.log("div元素");
            },
            func3(){
            	console.log("p元素");
            },
            func4(){
            	console.log("span元素");
            },
        }
    })

在这里插入图片描述

.self

self 阻止自身事件触发，但不会阻止冒泡。再冒泡事件中，点击设置self下的子类，才不会触发self本身，但是点击self本身，会触发间接有捕获效果

 <div @click="func2()" class="box1">
            1
            <p @click.self="func3()" class="box2">
                2
                <span @click="func4()" class="box3">3</span>
            </p>
        </div>

Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return {}
        },
        methods: {
            func2(){
            	console.log("div元素");
            },
            func3(){
            	console.log("p元素");
            },
            func4(){
            	console.log("span元素");
            },
        }
    })