Vue 常用的修饰符

什么叫痛苦，自己动手写的指令，用来限制输入框只能输入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>