当前位置：首页 > VUE

vue怎么实现回车添加

2026-01-20 15:15:37VUE

实现回车添加功能的方法

在Vue中实现回车添加功能，可以通过监听键盘事件来触发添加操作。以下是几种常见的实现方式：

监听键盘事件

vue怎么实现回车添加

<template>
  <input v-model="inputValue" @keyup.enter="addItem" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      items: []
    }
  },
  methods: {
    addItem() {
      if (this.inputValue.trim()) {
        this.items.push(this.inputValue)
        this.inputValue = ''
      }
    }
  }
}
</script>

使用修饰符简化 Vue提供了.enter修饰符，可以更简洁地监听回车键：

<input v-model="inputValue" @keyup.enter="addItem" />

结合表单提交 如果输入框在表单中，可以监听表单的submit事件：

vue怎么实现回车添加

<template>
  <form @submit.prevent="addItem">
    <input v-model="inputValue" />
    <button type="submit">添加</button>
  </form>
</template>

带验证的添加 可以在添加前进行输入验证：

methods: {
  addItem() {
    if (!this.inputValue.trim()) return
    this.items.push(this.inputValue.trim())
    this.inputValue = ''
  }
}

自动聚焦 添加完成后自动聚焦到输入框：

methods: {
  addItem() {
    if (!this.inputValue.trim()) return
    this.items.push(this.inputValue.trim())
    this.inputValue = ''
    this.$nextTick(() => {
      this.$refs.input.focus()
    })
  }
}

这些方法可以根据具体需求选择使用，核心都是通过监听回车事件来触发添加操作。

标签: vue