表单修饰符和事件修饰符-编程知识

表单修饰符和事件修饰符

表单修饰符和事件修饰符

表单修饰符

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元素");},}})