vue回车事件

作者：優雅dē颓废发布日期:2026-04-09 浏览:46

<template>
  <div>
    <!-- 输入框，绑定回车事件 -->
    <input type="text" v-model="message" @keyup.enter="handleEnter">
    <p>你输入的内容是: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '' // 绑定的输入框内容
    };
  },
  methods: {
    handleEnter() {
      // 当按下回车键时触发的方法
      alert('你按下了回车键，输入的内容是: ' + this.message);
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>

解释说明：

v-model="message"：将输入框的内容双向绑定到 message 变量上。
@keyup.enter="handleEnter"：监听键盘事件，当按下回车键 (enter) 时调用 handleEnter 方法。
handleEnter 方法会在用户按下回车键时触发，并弹出一个提示框显示用户输入的内容。

上一篇：tiny vue

下一篇：vue3引入子组件