表单修饰符和事件修饰符
表单修饰符
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
