• Vue如何实现按下回车键时执行某些操作的功能?
  • 发布于 2个月前
  • 247 热度
    0 评论
我们可以通过在执行某些操作的元素上添加 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”被输出到日志中。
用户评论