原文:地址
1.表单输入框input中的修饰符
(1).lazy:加lazy修饰符的区别相当于在输入后失去焦点或者摁了enter键视图才更新。不加lazy则是在keyup就更新,如下:
<input v-model.lazy="msg" >
<h3>{{msg}}</h3>
(2) .number:把输入的数值从字符串或其他类型转换为number类型,我们可以如下应正一下,当没输入值时,p标签显示为string,输入值后显示为number
<input v-model.number="msg" >
<h3>{{msg}}</h3>
<p>{{msg1}}</p>
<script>
data:{
msg:'',
msg1:''
},
computed:{
msg1:function(){
return typeof(this.msg)
}
}
</script>
(3).trim:自动过滤用户输入的首尾空格(中间空格过滤不了)
<input v-model.trim="msg" />
2.事件中的修饰符
<!-- 阻止单击事件冒泡,当点击box2时就不会触发box1的点击事件,若不加则会触发 -->
<div class="box1" @click="btn">
<div class="box2" @click.stop="btn1"></div>
</div>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联,阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式,先执行外层盒子事件,再执行里面盒子事件 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)才去执行 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次,2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
3.按键修饰符
只有在按enter时调用submit
<input v-on:keyup.enter="submit">
全部的按键别名:
.enter
.tab
.delete
(捕获 "删除" 和 "退格" 键).esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
以上就是Vue中比较常用的修饰符。
巴拉巴拉: