当前位置：首页 > VUE

vue实现增删

2026-01-08 00:26:21VUE

Vue 实现增删功能

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

数据定义

初始化一个数组用于存储列表数据，并在 Vue 实例的 data 中声明：

vue实现增删

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

添加功能

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

methods: {
  addItem() {
    if (this.newItemName.trim()) {
      this.items.push({
        id: Date.now(), // 生成唯一 ID
        name: this.newItemName
      });
      this.newItemName = ''; // 清空输入框
    }
  }
}

模板部分：

vue实现增删

<input v-model="newItemName" placeholder="输入新项名称">
<button @click="addItem">添加</button>

删除功能

通过索引或唯一标识（如 id）删除指定项：

methods: {
  deleteItem(id) {
    this.items = this.items.filter(item => item.id !== id);
  }
}

模板中使用 v-for 渲染列表，并为每项绑定删除事件：

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

关键点说明

唯一标识：建议为每项分配唯一 id（如 Date.now()），避免直接使用索引删除可能导致的渲染问题。
数组更新：Vue 能检测到数组的变更方法（如 push、filter），但直接通过索引修改项（如 this.items[0] = newValue）需使用 Vue.set。

Vue 3 差异：若使用 Vue 3，组合式 API 的写法如下：

import { ref } from 'vue';
const items = ref([...]);
const newItemName = ref('');

完整示例可参考 Vue 官方文档的列表渲染和事件处理部分。

标签: vue

分享给朋友：

实现vue组件

Vue 组件的基本实现 Vue 组件是 Vue.js 的核心特性之一，允许将 UI 拆分为独立、可复用的模块。以下是实现 Vue 组件的几种方式：单文件组件 (SFC) 使用 .vue 文件格式，…

实现.vue文件

创建.vue文件的基本结构一个标准的.vue文件包含三个部分：模板（template）、脚本（script）和样式（style）。这种结构允许开发者在一个文件中管理组件的HTML、JavaScrip…

vue实现全屏

Vue 实现全屏功能的方法在 Vue 中实现全屏功能可以通过浏览器提供的 Fullscreen API 来实现。以下是几种常见的实现方式：使用原生 Fullscreen API 通过调用 doc…

vue实现计算

Vue 实现计算的方法在 Vue 中实现计算功能可以通过多种方式完成，主要包括计算属性（computed）、方法（methods）和侦听器（watch）。以下是具体的实现方法：计算属性（Comp…

vue实现前端

Vue 实现前端的核心方法与步骤安装 Vue 项目使用 Vue CLI 或 Vite 创建项目。Vue CLI 是传统构建工具，Vite 是新一代轻量级工具。 npm init vue@la…

vue实现弹幕

Vue 实现弹幕功能弹幕功能通常包括动态生成、滚动显示、颜色和速度随机化等特性。以下是基于 Vue 3 的实现方法。核心思路使用 CSS 动画控制弹幕从右向左滚动。动态生成弹幕数据，随机设置…

vue实现增删