按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
常用的按键别名：
- .entrer
- .tab
- .esc
- .space
- .delete（捕获“删除”和”退格“键）
- .up
- .down
- .left
- .right
用法上和事件修饰符一样，挂载在v-on:后面，语法：v-on:keyup.xxx=’yyy’
<input class = 'aaa' v-model="inputValue" @keyup.delete="onKey"/>
系统修饰符
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器
- .ctrl
- .alt
- .shift
- .meta
注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
用法：
<input @keyup.alt.66="clear">
上面是当按下alt+b （66为b对应的keyCodes码） 的时候出发clear函数
<div @click.ctrl="doSomething">Do something</div>
这个例子意思是 ctrl+鼠标单击 触发dosomething函数
请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。
.exact
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
这种方式是不管按下几个键，只要ctrl和鼠标左键按下 就一定会触发onClick函数
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
加上.exact修饰后，只有ctrl和鼠标左键按下才会触发
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
注意：.exact 只对系统修饰符有效果，也就是说第二第三种情况，多按一个A,B,F什么的也是会触发的
鼠标按钮修饰符
- .left
- .right
- .middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
使用方法：
<button @click.middle ="onClick">A</button>
鼠标滚轮单击触发
Click默认是鼠标左键单击
其他修饰符
- .lazy
在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步 ，我们可以添加lazy修饰符，从而转变为使用change事件进行同步：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
- .number
如果想自动将用户的输入值转为数值类型，可以给v-model添加.number修饰符：
<input v-model.number="age" type="number">
这通常很有用，因为即使在type="number"时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat()解析，则会返回原始的值。
- .trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
同样前面都有空格加上.trim后 将前后空格都去掉了
网友评论