vue3回车键触发事件

作者：霸气邪剑仙发布日期:2025-02-14 浏览:128

<template>
  <input v-model="message" @keyup.enter="handleEnter" />
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleEnter() {
      console.log('回车键被按下，当前输入的内容是:', this.message);
      // 在这里可以添加更多逻辑，例如提交表单或执行其他操作
    }
  }
};
</script>

解释说明：

v-model="message"：将输入框的值绑定到 message 数据属性上，使得输入框的值和 message 同步。
@keyup.enter="handleEnter"：监听输入框的键盘事件，当用户按下回车键时触发 handleEnter 方法。
handleEnter 方法：在该方法中可以处理回车键触发后的逻辑，比如打印输入内容、提交表单等。

上一篇：vue关闭eslint

下一篇：vue.filter