Vue3增删改查用户代码

以下是一个简单的 Vue3 用户管理示例，包括增删改查功能：

<template>
  <div>
    <h2>用户管理</h2>
    <form @submit.prevent="submitForm">
      <label>姓名:</label>
      <input type="text" v-model="newUser.name" required>
      <br>
      <label>年龄:</label>
      <input type="number" v-model="newUser.age" required>
      <br>
      <label>性别:</label>
      <select v-model="newUser.gender" required>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      <br>
      <button type="submit">添加用户</button>
    </form>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in users" :key="index">
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.gender }}</td>
          <td>
            <button @click="editUser(index)">编辑</button>
            <button @click="deleteUser(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-if="editing">
      <h3>编辑用户</h3>
      <form @submit.prevent="updateUser">
        <label>姓名:</label>
        <input type="text" v-model="currentUser.name" required>
        <br>
        <label>年龄:</label>
        <input type="number" v-model="currentUser.age" required>
        <br>
        <label>性别:</label>
        <select v-model="currentUser.gender" required>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
        <br>
        <button type="submit">保存</button>
        <button @click="cancelEdit">取消</button>
      </form>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const newUser = reactive({ name: '', age: '', gender: '' });
    const users = reactive([
      { name: '张三', age: 20, gender: '男' },
      { name: '李四', age: 25, gender: '女' },
      { name: '王五', age: 30, gender: '男' },
    ]);
    const currentUser = reactive({ name: '', age: '', gender: '' });
    let editing = false;
    let editIndex = null;

    const submitForm = () => {
      users.push(newUser);
      newUser.name = '';
      newUser.age = '';
      newUser.gender = '';
    };

    const deleteUser = (index) => {
      users.splice(index, 1);
    };

    const editUser = (index) => {
      editing = true;
      editIndex = index;
      currentUser.name = users[index].name;
      currentUser.age = users[index].age;
      currentUser.gender = users[index].gender;
    };

    const updateUser = () => {
      users[editIndex].name = currentUser.name;
      users[editIndex].age = currentUser.age;
      users[editIndex].gender = currentUser.gender;
      editing = false;
    };

    const cancelEdit = () => {
      editing = false;
    };

    return { newUser, users, currentUser, editing, submitForm, deleteUser, editUser, updateUser, cancelEdit };
  },
};
</script>

在这个示例中，我们使用了 Vue3 的 `reactive` 方法来创建响应式对象。我们定义了 `newUser` 对象来存储新用户的信息，并使用 `v-model` 指令将表单元素与 `newUser` 对象绑定。我们还定义了一个 `users` 数组来存储所有用户的信息，并使用 `v-for` 指令在表格中显示每个用户的信息。我们还定义了 `currentUser` 对象来存储当前正在编辑的用户的信息，以及 `editing` 变量来跟踪是否正在编辑用户。我们还定义了一些方法来处理表单提交、用户删除、用户编辑和用户更新等操作。最后，我们在 `setup` 函数中返回了一些变量和方法，这些变量和方法可以在模板中使用。