当前位置：首页 > VUE

vue实现动态添加删除

2026-02-24 02:15:54VUE

Vue 动态添加和删除的实现方法

使用 v-for 和数组方法

在 Vue 中可以通过 v-for 指令结合数组方法来动态渲染列表，并通过数组的 push 和 splice 方法实现添加和删除功能。

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

<script>
export default {
  data() {
    return {
      items: ['项目1', '项目2', '项目3']
    }
  },
  methods: {
    addItem() {
      this.items.push(`项目${this.items.length + 1}`)
    },
    removeItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

使用计算属性

对于更复杂的动态内容，可以使用计算属性来管理数据，并通过方法来修改数据源。

<template>
  <div>
    <input v-model="newItem" placeholder="输入新项目">
    <button @click="addItem">添加</button>
    <ul>
      <li v-for="(item, index) in filteredItems" :key="index">
        {{ item }}
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      newItem: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.length > 0)
    }
  },
  methods: {
    addItem() {
      if (this.newItem.trim()) {
        this.items.push(this.newItem)
        this.newItem = ''
      }
    },
    removeItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

动态组件

对于需要动态添加和删除组件的情况，可以使用动态组件配合 is 属性。

<template>
  <div>
    <button @click="addComponent">添加组件</button>
    <div v-for="(comp, index) in components" :key="index">
      <component :is="comp.type" @remove="removeComponent(index)"></component>
    </div>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      components: [],
      nextComponent: 0
    }
  },
  methods: {
    addComponent() {
      this.components.push({
        type: this.nextComponent % 2 === 0 ? 'ComponentA' : 'ComponentB'
      })
      this.nextComponent++
    },
    removeComponent(index) {
      this.components.splice(index, 1)
    }
  }
}
</script>