vue修饰符

一、v-model的修饰符

1、.lazy

当焦点离开文本框时，绑定的数据才会开始变化。

2、.number

*该修饰符用来将输入内容自动转换成数值。
*当开始输入数字时，属性值将实时更新成Number类型的数值。数字后输入其他非数字的字符，属性值将不再变化。
*而当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值，所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。

3、.trim

该修饰符用来自动过滤字符串前后的空字符。

二、v-on的修饰符

1、.stop

该修饰符将阻止事件向上冒泡。同理于调用 event.stopPropagation() 方法

2、.prevent

该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault() 方法

image.png

3、.one

该修饰符表示绑定的事件只会被触发一次

三、键值修饰符

该修饰符可以用来监听键盘事件，通过 @keyup.keyCode 的方式来监听键盘特定按键的事件。也可以通过按键名称来监听

image.png

四、 .exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button></pre>

五、 鼠标按钮修饰符

• .left
• .right
• .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。