当前位置：首页 > VUE

vue增删改查简单实现

2026-01-06 23:11:36VUE

基础环境搭建

确保已安装Node.js和Vue CLI。通过以下命令创建Vue项目：

npm install -g @vue/cli
vue create vue-crud-demo
cd vue-crud-demo
npm run serve

数据模型定义

在src目录下创建data.js存放模拟数据：

export default [
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 }
]

核心组件实现

创建UserList.vue组件：

vue增删改查简单实现

<template>
  <div>
    <input v-model="newUser.name" placeholder="姓名">
    <input v-model.number="newUser.age" placeholder="年龄" type="number">
    <button @click="addUser">添加</button>

    <table>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.name }}</td>
        <td>{{ user.age }}</td>
        <td>
          <button @click="editUser(user)">编辑</button>
          <button @click="deleteUser(user.id)">删除</button>
        </td>
      </tr>
    </table>

    <div v-if="editing">
      <input v-model="currentUser.name">
      <input v-model.number="currentUser.age" type="number">
      <button @click="updateUser">更新</button>
    </div>
  </div>
</template>

<script>
import userData from '@/data'

export default {
  data() {
    return {
      users: [...userData],
      newUser: { id: null, name: '', age: null },
      editing: false,
      currentUser: {}
    }
  },
  methods: {
    addUser() {
      this.newUser.id = Date.now()
      this.users.push({...this.newUser})
      this.newUser = { id: null, name: '', age: null }
    },
    deleteUser(id) {
      this.users = this.users.filter(user => user.id !== id)
    },
    editUser(user) {
      this.editing = true
      this.currentUser = {...user}
    },
    updateUser() {
      const index = this.users.findIndex(u => u.id === this.currentUser.id)
      this.$set(this.users, index, {...this.currentUser})
      this.editing = false
    }
  }
}
</script>

状态管理优化（可选）

对于复杂应用可引入Vuex：

npm install vuex

创建store.js：

vue增删改查简单实现

import Vue from 'vue'
import Vuex from 'vuex'
import userData from '@/data'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    users: [...userData]
  },
  mutations: {
    ADD_USER(state, user) {
      state.users.push(user)
    },
    DELETE_USER(state, id) {
      state.users = state.users.filter(u => u.id !== id)
    },
    UPDATE_USER(state, updatedUser) {
      const index = state.users.findIndex(u => u.id === updatedUser.id)
      Vue.set(state.users, index, updatedUser)
    }
  }
})

表单验证增强

使用Vuelidate进行客户端验证：

npm install vuelidate

在组件中添加：

import { required, minValue } from 'vuelidate/lib/validators'

export default {
  validations: {
    newUser: {
      name: { required },
      age: { required, minValue: minValue(1) }
    }
  },
  methods: {
    addUser() {
      this.$v.newUser.$touch()
      if (!this.$v.newUser.$invalid) {
        // 验证通过逻辑
      }
    }
  }
}