当前位置：首页 > VUE

vue原生实现crud功能

2026-01-22 08:27:23VUE

Vue 原生实现 CRUD 功能

在 Vue 中实现基础的 CRUD（增删改查）功能，可以通过组合式 API 或选项式 API 完成。以下是一个基于组合式 API 的完整实现示例，包含数据列表展示、添加、编辑和删除功能。

数据定义与状态管理

import { ref } from 'vue';

const items = ref([
  { id: 1, name: 'Item 1', description: 'Description 1' },
  { id: 2, name: 'Item 2', description: 'Description 2' }
]);

const formData = ref({
  id: null,
  name: '',
  description: ''
});

const isEditing = ref(false);

添加/更新数据

const saveItem = () => {
  if (isEditing.value) {
    const index = items.value.findIndex(item => item.id === formData.value.id);
    items.value[index] = { ...formData.value };
  } else {
    const newId = Math.max(...items.value.map(item => item.id)) + 1;
    items.value.push({ ...formData.value, id: newId });
  }
  resetForm();
};

const editItem = (item) => {
  formData.value = { ...item };
  isEditing.value = true;
};

删除数据

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

表单重置

const resetForm = () => {
  formData.value = { id: null, name: '', description: '' };
  isEditing.value = false;
};

模板示例

<template>
  <div>
    <form @submit.prevent="saveItem">
      <input v-model="formData.name" placeholder="Name" required>
      <input v-model="formData.description" placeholder="Description">
      <button type="submit">{{ isEditing ? 'Update' : 'Add' }}</button>
      <button v-if="isEditing" @click="resetForm">Cancel</button>
    </form>

    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.description }}
        <button @click="editItem(item)">Edit</button>
        <button @click="deleteItem(item.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

完整组件示例

<script setup>
import { ref } from 'vue';

// 数据状态
const items = ref([...]);
const formData = ref({...});
const isEditing = ref(false);

// 方法
const saveItem = () => {...};
const editItem = (item) => {...};
const deleteItem = (id) => {...};
const resetForm = () => {...};
</script>

<template>
  <!-- 表单和列表模板 -->
</template>