什么叫痛苦,自己动手写的指令,用来限制输入框只能输入number,正在自己写好了指令准备分享给小伙伴的时候,突然意识到了,这玩意儿不是Vue自带的吗?????
算了算了,自己的憨憨操作就先放放,先给大家整理一下常用的修饰符。
一、v-model修饰符
- .trim 去除输入框前后的空格,不会清除输入字符中间的空格
<el-input v-model.trim="name"></el-input>
- .number 在你输入了数字时候,就不允许输入除数字以外的字符,但是可以从一开始就输入aaa
<el-input v-model.number="age"></el-input>
- .lazy 输入框的绑定值不会在你输入的时候更新,在你光标离开的时候才会更新绑定值
<el-input v-model.lazy="name"></el-input>
二、事件修饰符
- .stop 阻止事件冒泡,相当于event.stopPropagation()方法
<el-button @click.stop="handleClick"></el-button>
- .self 只有元素本身触发时才触发方法,就是只有点击元素本身才会触发,算是另外一种阻止事件冒泡
<el-button @click.self="handleClick"></el-button>
- .prevent 阻止默认事件,相当于event.preventDefault()方法
<el-button @click.prevent="handleClick"></el-button>
修饰符是可以使用链式写法的:
<el-input v-model.number.trim="name"></el-input>