当前位置：首页 > VUE

vue实现增删

2026-01-13 04:23:59VUE

Vue 实现增删功能

在 Vue 中实现增删功能通常涉及数据绑定、事件处理和列表渲染。以下是常见的实现方式：

数据初始化

在 Vue 实例或组件的 data 中定义数组存储数据：

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

添加功能

通过 v-model 绑定输入框，点击按钮触发添加方法：

methods: {
  addItem() {
    if (this.newItem.trim()) {
      this.items.push({
        id: Date.now(),
        name: this.newItem
      })
      this.newItem = ''
    }
  }
}

模板部分：

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

删除功能

通过索引或唯一标识删除数组元素：

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

模板部分：

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

使用计算属性

对于需要过滤或排序的列表，可以结合计算属性：

vue实现增删

computed: {
  sortedItems() {
    return [...this.items].sort((a, b) => a.name.localeCompare(b.name))
  }
}

注意事项

为列表项设置唯一的 :key 属性以提高渲染性能
对于大型数据集考虑使用虚拟滚动优化性能
深层对象修改时可能需要使用 Vue.set 确保响应式更新

标签: vue

分享给朋友：

vue实现导航栏切图

Vue 实现导航栏切图使用 Vue Router 实现基础导航在 Vue 项目中，可以通过 Vue Router 实现导航栏的路由切换。创建一个导航栏组件，并在其中使用 <router-li…

vue 指令实现

Vue 指令实现 Vue 指令是 Vue.js 提供的特殊属性，用于在 DOM 元素上添加特殊行为。指令以 v- 前缀开头，例如 v-model、v-if、v-for 等。以下是实现自定义指令和常用内…

vue插槽实现

插槽的基本概念 Vue插槽（Slot）是一种内容分发机制，允许父组件向子组件传递模板片段，子组件通过<slot>标签定义接收位置。插槽的核心作用是增强组件的灵活性和复用性。默认插槽子…

vue实现选择

Vue 实现选择功能的方法在 Vue 中实现选择功能可以通过多种方式完成，以下介绍几种常见的实现方法。使用 v-model 绑定单选通过 v-model 可以轻松实现单选功能。以下是一个简单的…

vue实现popper

Vue 实现 Popper 的方法使用 Tippy.js 库 Tippy.js 是一个轻量级的 Popper.js 封装库，提供丰富的工具提示功能。安装 Tippy.js 及其 Vue 封装： n…

vue实现tabbar

Vue 实现 TabBar 的方法使用 Vue Router 实现基础 TabBar 安装 Vue Router 依赖： npm install vue-router 创建路由配置文件（route…

vue实现增删