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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容