Vue 事件修饰符
不同的 v-on 修饰符
事件修饰符用于不同的情况。 当我们监听键盘事件、鼠标点击事件时，我们可以使用事件修饰符，甚至可以将事件修饰符相互组合使用。
事件修饰符 .once 可以在键盘和鼠标单击事件之后使用。
键盘按键事件修饰符
我们有三种不同的键盘事件类型 keydown, keypress 和 keyup。
对于每个按键事件类型，我们可以准确指定按键事件发生后监听哪个按键。 例如，我们有 .space, .enter, .w 和 .up 等。
可以将按键事件写入网页，也可以用 console.log(event.key) 写入控制台，自己查找某个按键的值:
示例
keydown 键盘事件触发"getKey"方法，事件对象中的"key"值将写入控制台和网页。
<input v-on:keydown="getKey">
<p> {{ keyValue }} </p>
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。 这些键可以与其他键结合使用，或者与鼠标单击结合使用。 |
示例
当用户在 <textarea> 标签内写入"s"时，使用 .s 修饰符创建警报。
<div id="app">
<p>Try pressing the 's' key:</p>
<textarea v-on:keyup.s="createAlert"></textarea>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
methods: {
createAlert() {
alert("You pressed the 'S' key!")
}
}
})
app.mount('#app')
</script>
亲自试一试 »
组合键盘事件修饰符
事件修饰符也可以相互组合使用，以便调用方法必须同时发生不止一件事。
示例
结合使用 .s 和 .ctrl 修饰符，可以在 <textarea> 标签内同时按下"s"和"ctrl"时创建警报。
<div id="app">
<p>Try pressing the 's' key:</p>
<textarea v-on:keydown.ctrl.s="createAlert"></textarea>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
methods: {
createAlert() {
alert("You pressed the 'S' and 'Ctrl' keys, in combination!")
}
}
})
app.mount('#app')
</script>
亲自试一试 »
鼠标按钮修饰符
要对鼠标单击做出反应，我们可以编写 v-on:click，但要指定单击的是哪个鼠标按钮，我们可以使用 .left, .center 或 .right 修饰符。
触控板用户:您可能需要用两根手指单击，或者单击计算机上触控板的右下角来创建右键单击。
示例
当用户右键单击 <div> 元素时更改背景颜色:
<div id="app">
<div v-on:click.right="changeColor"
v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
<p>Press right mouse button here.</p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
bgColor: 0
}
},
methods: {
changeColor() {
this.bgColor+=50
}
}
})
app.mount('#app')
</script>
亲自试一试 »
鼠标按钮事件还可以与系统修饰键结合使用。
示例
当用户右键单击 <div> 元素并结合"ctrl"键时更改背景颜色:
<div id="app">
<div v-on:click.right.ctrl="changeColor"
v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
<p>Press right mouse button here.</p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
bgColor: 0
}
},
methods: {
changeColor() {
this.bgColor+=50
}
}
})
app.mount('#app')
</script>
亲自试一试 »
除了 .right 修饰符之外，还可以使用事件修饰符 .prevent 来防止右键单击时出现默认下拉菜单。
示例
右键单击更改 <div> 元素的背景颜色时，下拉菜单将不会出现:
<div id="app">
<div v-on:click.right.prevent="changeColor"
v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
<p>Press right mouse button here.</p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
bgColor: 0
}
},
methods: {
changeColor() {
this.bgColor+=50
}
}
})
app.mount('#app')
</script>
亲自试一试 »
通过在方法内使用 event.preventDefault() 可以防止右键单击后出现下拉菜单，但使用 Vue .prevent 修饰符后，代码将变得更具可读性且更易于维护。
您还可以结合其他修饰符对鼠标左键单击做出反应，例如 click.left.shift:
示例
按住"shift"键盘键并在 <img> 标签上按鼠标左键可更改图像。
<div id="app">
<p>Hold 'Shift' key and press left mouse button:</p>
<img v-on:click.left.shift="changeImg" v-bind:src="imgUrl">
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
imgUrlIndex: 0,
imgUrl: 'img_tiger_square.jpeg',
imgages: [
'img_tiger_square.jpeg',
'img_moose_square.jpeg',
'img_kangaroo_square.jpeg'
]
}
},
methods: {
changeImg() {
this.imgUrlIndex++
if(this.imgUrlIndex>=3){
this.imgUrlIndex=0
}
this.imgUrl = this.images[this.imgUrlIndex]
}
}
})
app.mount('#app')
</script>
亲自试一试 »
