vue 回车事件

作者：昨夜的风发布日期:2026-06-01 浏览:72

<template>
  <div>
    <!-- 输入框，绑定 @keyup.enter 事件 -->
    <input v-model="message" @keyup.enter="onEnter">
  </div>
</template>

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

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

解释说明：

v-model="message"：将输入框的值与 data 中的 message 属性进行双向绑定。
@keyup.enter="onEnter"：监听键盘事件，当用户按下回车键（Enter）时，触发 onEnter 方法。
onEnter 方法会在用户按下回车键时执行，并弹出一个提示框显示用户输入的内容。

上一篇：vue 字符串分割

下一篇：vue watch用法