1 v-on 中的常用修饰符
1) .stop 阻止了事件冒泡
<div @click="divClick">
父元素
<button @click.stop="btnClick">点击</button>
</div>
2) .prevent 取消默认事件
<a href="http://www.baidu.com" @click.prevent="aClick"> 百度一下 </a>
3) 键盘事件[keyCode(键盘编码) | keyAlias(键盘简写) ]
<input type="text" @keyup.enter="keyUp" />
4) 监听自定义组件的跟元素原生事件 .native
//通过native才可监听到itemClick事件
(父)
<zj @click.native="itemClick"></zj>
(子zj.vue)
<template>
<div>
我是子元素
</div>
</template>
5) .once 只能触发一次回调
<button @click.once="onceClick()"> </button>
import zj form '@components/zj.vue'
components:{
zj,
},
methods:{
divClick(){
console.log('父元素被点击了')
},
btnClick(){
console.log('按钮被点击了')
},
aClick(){
console.log('a标签没跳转');
//在做其他处理
},
keyUp(){
console.log('keyUp被触发了');
},
itemClick(){
console.log('itemClick被点击了');
},
onceClick(){
console.log('onceClick被点击了');
}
}
2 v-model 常用修饰符
1).lazy 懒惰的意思:不要实时更新数据,当确定信息完成后再发生事件.
失去焦点或回车之后才再次更新(默认自带)。
<input type = "text" v-model.lazy="msg">
<div>{{ msg }}</div>
2).number 更改为number类型
<input type = "text" v-model.number="age">
<div> {{ typeof age }} </div>
3).trim 过滤收尾空格