我们可以通过在执行某些操作的元素上添加 v-on:keyup 指令来在按下回车键时执行某些操作。
例如,我们可以编写以下代码:
<template>
<div id="app">
<input v-on:keyup.enter="onEnter" />
</div>
</template>
<script>
export default {
name: "App",
methods: {
onEnter() {
console.log("pressed enter");
},
},
};
</script>
我们使用 enter 修饰符添加 v-on:keyup 指令来监听回车键的按下。我们将其值设置为 onEnter 方法,以便在聚焦到输入框并按下回车键时运行它。此外,我们可以使用 @ 来代替 v-on: 来稍微简化代码。
具体来说,我们可以编写以下代码:
<template>
<div id="app">
<input @keyup.enter="onEnter" />
</div>
</template>
<script>
export default {
name: "App",
methods: {
onEnter() {
console.log("pressed enter");
},
},
};
</script>
无论使用哪个示例,当我们聚焦到输入框并按下回车键时,都应该看到“pressed enter”被输出到日志中。