当前位置:首页 > 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) {
        // 验证通过逻辑
      }
    }
  }
}

注意事项

  1. 使用v-model.number处理数字类型输入
  2. 对象操作使用展开运算符避免引用问题
  3. 数组更新使用Vue.setthis.$set确保响应式
  4. v-for循环添加唯一的:key属性
  5. 生产环境应替换为真实API调用

标签: 简单vue
分享给朋友:

相关文章

vue实现录播播放

vue实现录播播放

Vue 实现录播播放 使用 video.js 实现 安装 video.js 和相关的 Vue 适配器: npm install video.js @videojs-player/vue 在 Vue…

vue表单实现搜索

vue表单实现搜索

实现Vue表单搜索功能 在Vue中实现表单搜索功能通常涉及表单绑定、事件处理和搜索逻辑。以下是具体实现方法: 数据绑定与表单结构 使用v-model实现表单与Vue数据的双向绑定: <t…

vue实现压缩上传文件

vue实现压缩上传文件

压缩上传文件的实现方法 在Vue中实现文件压缩和上传功能,可以通过以下步骤完成。该方法结合了前端文件压缩库和HTTP请求,确保文件在上传前被有效压缩。 安装必要的依赖 需要使用compressorj…

vue路由实现内部切换

vue路由实现内部切换

Vue 路由实现内部切换的方法 Vue Router 是 Vue.js 官方的路由管理器,用于实现单页应用(SPA)的页面切换。以下是几种常见的内部路由切换方式: 使用 <router-lin…

vue实现菜单栏锚点

vue实现菜单栏锚点

实现锚点菜单的基本思路 在Vue中实现菜单栏锚点功能,主要涉及两个方面:创建可跳转的锚点位置,以及菜单项的点击滚动控制。通过监听滚动事件可以高亮当前可见区域的对应菜单项。 创建页面锚点位置 在需要跳…

vue实现a4打印模板

vue实现a4打印模板

使用Vue实现A4打印模板 在Vue中实现A4打印模板需要结合CSS的打印样式和Vue的模板渲染能力。以下是具体实现方法: 设置A4纸张尺寸 在CSS中定义A4纸张的标准尺寸(210mm × 29…