当前位置：首页 > VUE

vue实现添加和删除

2026-01-23 01:35:51VUE

实现添加和删除功能的基本思路

在Vue中实现添加和删除功能通常涉及数据绑定、事件处理和列表渲染。以下是实现这些功能的典型方法。

数据初始化

在Vue组件中定义一个数组来存储数据项，并初始化一个空字符串用于输入新项。

data() {
  return {
    items: ['Item 1', 'Item 2', 'Item 3'],
    newItem: ''
  }
}

添加功能实现

通过v-model绑定输入框的值，并在点击按钮时触发添加方法。

<input v-model="newItem" placeholder="Add new item">
<button @click="addItem">Add</button>

在方法中检查输入是否为空，然后将新项添加到数组中并清空输入框。

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

删除功能实现

使用v-for渲染列表，并为每个项添加删除按钮。

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ item }}
    <button @click="deleteItem(index)">Delete</button>
  </li>
</ul>

在方法中根据索引删除对应的项。

methods: {
  deleteItem(index) {
    this.items.splice(index, 1);
  }
}

完整示例代码

<template>
  <div>
    <input v-model="newItem" placeholder="Add new item">
    <button @click="addItem">Add</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
        <button @click="deleteItem(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      newItem: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItem.trim() !== '') {
        this.items.push(this.newItem);
        this.newItem = '';
      }
    },
    deleteItem(index) {
      this.items.splice(index, 1);
    }
  }
}
</script>