vue增删改查函数调用

以下是一个基于Vue的增删改查示例，包含了对应的函数调用：

<template>
  <div>
    <h2>用户管理</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>
            <button @click="editUser(user)">编辑</button>
            <button @click="deleteUser(user)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <form v-if="showForm" @submit.prevent="saveUser">
      <h3>{{ formTitle }}</h3>
      <label for="name">姓名：</label>
      <input type="text" id="name" v-model="currentUser.name" required>
      <label for="age">年龄：</label>
      <input type="number" id="age" v-model="currentUser.age" required>
      <button type="submit">{{ formSubmitLabel }}</button>
      <button type="button" @click="cancelEdit">取消</button>
    </form>
    <button @click="addUser">添加用户</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 }
      ],
      showForm: false,
      formTitle: '',
      formSubmitLabel: '',
      currentUser: {
        id: null,
        name: '',
        age: null
      }
    }
  },
  methods: {
    addUser() {
      this.currentUser = { id: null, name: '', age: null }
      this.formTitle = '添加用户'
      this.formSubmitLabel = '添加'
      this.showForm = true
    },
    editUser(user) {
      this.currentUser = { ...user }
      this.formTitle = '编辑用户'
      this.formSubmitLabel = '保存'
      this.showForm = true
    },
    deleteUser(user) {
      const index = this.users.findIndex(u => u.id === user.id)
      this.users.splice(index, 1)
    },
    saveUser() {
      if (this.currentUser.id === null) {
        // 添加用户
        this.currentUser.id = this.users.length + 1
        this.users.push({ ...this.currentUser })
      } else {
        // 修改用户
        const index = this.users.findIndex(u => u.id === this.currentUser.id)
        this.users.splice(index, 1, { ...this.currentUser })
      }
      this.showForm = false
    },
    cancelEdit() {
      this.showForm = false
    }
  }
}
</script>

在上面的示例代码中，我们定义了一个 `users` 数组来存储用户数据，同时定义了一些用于增删改查操作的方法：

- `addUser`：添加用户操作，将 `currentUser` 对象重置为初始值并显示表单；
- `editUser`：编辑用户操作，将 `currentUser` 对象设置为要编辑的用户并显示表单；
- `deleteUser`：删除用户操作，根据用户ID从 `users` 数组中删除对应的用户；
- `saveUser`：保存用户操作，根据 `currentUser` 对象来判断是添加用户还是修改用户，并将用户数据更新到 `users` 数组中；
- `cancelEdit`：取消编辑操作，将 `showForm` 属性设置为 `false` 隐藏表单。

在模板中，我们通过 `v-for` 指令来遍历 `users` 数组并显示用户数据，同时为每个用户添加编辑和删除按钮。当需要添加或编辑用户时，会显示一个表单来输入用户信息，保存或取消操作后表单会隐藏。

需要注意的是，以上示例代码仅供参考，实际开发中还需要考虑一些其他的情况，如数据校验、错误处理等。