v-on 修饰符事件修饰符用于不同的情况。 当我们监听键盘事件、鼠标点击事件时，我们可以使用事件修饰符，甚至可以将事件修饰符相互组合使用。
事件修饰符 .once 可以在键盘和鼠标单击事件之后使用。
我们有三种不同的键盘事件类型 keydown, keypress 和 keyup。
对于每个按键事件类型，我们可以准确指定按键事件发生后监听哪个按键。 例如，我们有 .space, .enter, .w 和 .up 等。
可以将按键事件写入网页，也可以用 console.log(event.key) 写入控制台，自己查找某个按键的值:
keydown 键盘事件触发"getKey"方法，事件对象中的"key"值将写入控制台和网页。
{{ keyValue }}
data() { return { keyValue = '' } }, methods: { getKey(evt) { this.keyValue = evt.key console.log(evt.key) } } »我们还可以选择限制事件仅在鼠标单击或按键与系统修饰键 .alt, .ctrl, .shift 或 .meta 组合发生时发生。 系统修饰键 .meta 代表 Windows 计算机上的 Windows 键，或 Apple 计算机上的命令键。
| 按键修饰符 | 详细信息 |
|---|---|
.[Vue key alias] |
Vue 中最常见的键都有自己的别名:
|
.[letter] |
指定按下该键时出现的字母。 例如:使用 .s 键修饰符来监听"S"键。 |
.[system modifier key] |
.alt、.ctrl、.shift 或 .meta。 这些键可以与其他键结合使用，或者与鼠标单击结合使用。 |
当用户在
事件修饰符也可以相互组合使用，以便调用方法必须同时发生不止一件事。
结合使用 .s 和 .ctrl 修饰符，可以在
要对鼠标单击做出反应，我们可以编写 v-on:click，但要指定单击的是哪个鼠标按钮，我们可以使用 .left, .center 或 .right 修饰符。
触控板用户:您可能需要用两根手指单击，或者单击计算机上触控板的右下角来创建右键单击。
当用户右键单击 Press right mouse button here. 鼠标按钮事件还可以与系统修饰键结合使用。 当用户右键单击 Press right mouse button here. 除了 右键单击更改 Press right mouse button here. 通过在方法内使用 您还可以结合其他修饰符对鼠标左键单击做出反应，例如 按住"shift"键盘键并在 Hold 'Shift' key and press left mouse button: 相关 视频 RELATED VIDEOS 科技资讯 1 2 3 4 5 6 7 8 9 精选课程 共5课时 17.2万人学习 共49课时 77万人学习 共29课时 61.7万人学习 共25课时 39.3万人学习 共43课时 71万人学习 共25课时 61.6万人学习 共22课时 23万人学习 共28课时 33.9万人学习 共89课时 125万人学习示例
.right 修饰符之外，还可以使用事件修饰符 .prevent 来防止右键单击时出现默认下拉菜单。示例
event.preventDefault() 可以防止右键单击后出现下拉菜单，但使用 Vue .prevent 修饰符后，代码将变得更具可读性且更易于维护。click.left.shift:示例
v-on:click.left.shift="changeImg" v-bind:src="imgUrl">
Vue 练习
