表单修饰符和事件修饰符
表单修饰符
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元素");},}})
- 失联
最后编辑时间 2024,03,11;17:08