当前位置：首页 > VUE

vue怎么实现回车添加

2026-02-21 07:08:41VUE

Vue 实现回车添加功能

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

方法一：使用 `@keyup.enter` 指令

在模板中直接使用 Vue 的键盘事件修饰符：

<template>
  <div>
    <input v-model="inputValue" @keyup.enter="addItem" />
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

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

方法二：使用原生 JavaScript 事件监听

对于更复杂的键盘事件处理，可以使用原生事件监听：

<template>
  <div>
    <input ref="inputField" v-model="inputValue" />
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      items: []
    }
  },
  mounted() {
    this.$refs.inputField.addEventListener('keyup', (event) => {
      if (event.key === 'Enter') {
        this.addItem()
      }
    })
  },
  methods: {
    addItem() {
      if (this.inputValue.trim()) {
        this.items.push(this.inputValue.trim())
        this.inputValue = ''
      }
    }
  }
}
</script>

方法三：表单提交方式

结合表单提交可以实现更完整的交互：

vue怎么实现回车添加

<template>
  <div>
    <form @submit.prevent="addItem">
      <input v-model="inputValue" />
      <button type="submit">添加</button>
    </form>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

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