当前位置：首页 > VUE

vue实现增删

2026-02-10 11:49:16VUE

Vue 实现增删功能

数据绑定与列表渲染

在Vue中实现增删功能通常基于数据绑定和v-for指令。通过操作数组数据，结合列表渲染自动更新DOM。

<template>
  <div>
    <input v-model="newItem" @keyup.enter="addItem">
    <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'],
      newItem: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItem.trim()) {
        this.items.push(this.newItem.trim())
        this.newItem = ''
      }
    },
    removeItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

使用计算属性优化

当需要对列表数据进行过滤或处理时，可以使用计算属性：

vue实现增删

computed: {
  filteredItems() {
    return this.items.filter(item => item.includes('关键'))
  }
}

组件化实现

对于复杂场景，可将列表项封装为独立组件：

vue实现增删

<template>
  <ItemComponent 
    v-for="item in items" 
    :key="item.id"
    :item="item"
    @delete="handleDelete"
  />
</template>

<script>
import ItemComponent from './ItemComponent.vue'

export default {
  components: { ItemComponent },
  methods: {
    handleDelete(id) {
      this.items = this.items.filter(item => item.id !== id)
    }
  }
}
</script>

服务端交互

实际项目中通常需要与服务端API交互：

methods: {
  async deleteItem(id) {
    try {
      await axios.delete(`/api/items/${id}`)
      this.items = this.items.filter(item => item.id !== id)
    } catch (error) {
      console.error('删除失败', error)
    }
  }
}

状态管理

对于大型应用，建议使用Vuex或Pinia管理状态：

// 使用Pinia示例
import { defineStore } from 'pinia'

export const useItemStore = defineStore('items', {
  state: () => ({ items: [] }),
  actions: {
    addItem(item) {
      this.items.push(item)
    },
    removeItem(id) {
      this.items = this.items.filter(item => item.id !== id)
    }
  }
})