当前位置：首页 > VUE

vue实现动态添加删除

2026-01-23 11:39:15VUE

Vue 实现动态添加和删除元素

在 Vue 中动态添加和删除元素通常通过操作数据数组实现，结合 v-for 指令渲染列表，并通过方法修改数组内容。

基本实现步骤

1. 数据准备 在 Vue 的 data 中定义一个数组，用于存储动态元素的数据：

data() {
  return {
    items: [] // 初始为空数组
  }
}

2. 添加元素 通过方法向数组添加新元素，触发视图更新：

methods: {
  addItem() {
    this.items.push({
      id: Date.now(), // 唯一标识
      content: '新项目' + (this.items.length + 1)
    })
  }
}

3. 删除元素 通过过滤或 splice 方法移除指定元素：

methods: {
  removeItem(id) {
    this.items = this.items.filter(item => item.id !== id)
    // 或使用 splice：
    // const index = this.items.findIndex(item => item.id === id)
    // this.items.splice(index, 1)
  }
}

4. 模板渲染 使用 v-for 循环渲染列表，并绑定删除操作：

<template>
  <div>
    <button @click="addItem">添加项目</button>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.content }}
        <button @click="removeItem(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

进阶实现（表单输入动态添加）

1. 绑定输入框

<input v-model="newItemContent" placeholder="输入内容">
<button @click="addItem">添加</button>

2. 修改添加方法

data() {
  return {
    newItemContent: '',
    items: []
  }
},
methods: {
  addItem() {
    if (!this.newItemContent.trim()) return
    this.items.push({
      id: Date.now(),
      content: this.newItemContent
    })
    this.newItemContent = ''
  }
}

使用 Vue 3 Composition API

import { ref } from 'vue'

setup() {
  const items = ref([])
  const newItemContent = ref('')

  const addItem = () => {
    if (!newItemContent.value.trim()) return
    items.value.push({
      id: Date.now(),
      content: newItemContent.value
    })
    newItemContent.value = ''
  }

  const removeItem = (id) => {
    items.value = items.value.filter(item => item.id !== id)
  }

  return { items, newItemContent, addItem, removeItem }
}