vue30写一个增删改查

以下是一个使用Vue 3.0编写的增删改查的示例：

<template>
  <div>
    <h2>CRUD 示例</h2>
  
    <!-- 创建表单 -->
    <form @submit.prevent="createUser">
      <h3>创建用户</h3>
      <input type="text" v-model="newUser.name" placeholder="姓名" required>
      <input type="email" v-model="newUser.email" placeholder="邮箱" required>
      <button type="submit">创建</button>
    </form>
  
    <!-- 用户列表 -->
    <h3>用户列表</h3>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
        <button @click="editUser(user)">编辑</button>
        <button @click="deleteUser(user)">删除</button>
      </li>
    </ul>
  
    <!-- 编辑表单 -->
    <form v-if="editingUser" @submit.prevent="updateUser">
      <h3>编辑用户</h3>
      <input type="text" v-model="editingUser.name" required>
      <input type="email" v-model="editingUser.email" required>
      <button type="submit">保存</button>
      <button @click="cancelEdit">取消</button>
    </form>
  </div>
</template>

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

export default {
  data() {
    return {
      users: [
        { id: 1, name: 'John Doe', email: 'john@example.com' },
        { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
      ],
      newUser: {
        name: '',
        email: '',
      },
      editingUser: null,
    };
  },
  methods: {
    createUser() {
      if (this.newUser.name && this.newUser.email) {
        this.users.push({
          id: Math.random(),
          name: this.newUser.name,
          email: this.newUser.email,
        });
        this.newUser.name = '';
        this.newUser.email = '';
      }
    },
    editUser(user) {
      this.editingUser = { ...user };
    },
    updateUser() {
      if (this.editingUser.name && this.editingUser.email) {
        const index = this.users.findIndex(user => user.id === this.editingUser.id);
        if (index !== -1) {
          this.users.splice(index, 1, { ...this.editingUser });
          this.editingUser = null;
        }
      }
    },
    cancelEdit() {
      this.editingUser = null;
    },
    deleteUser(user) {
      const index = this.users.findIndex(u => u.id === user.id);
      if (index !== -1) {
        this.users.splice(index, 1);
      }
    },
  },
};
</script>

在这个示例中，我们使用了ref函数来定义响应式数据。users数组存储了用户列表，newUser对象用于创建新用户，editingUser对象用于编辑用户。

createUser方法用于创建新用户，将新用户添加到users数组中。

editUser方法用于编辑用户，将要编辑的用户赋值给editingUser，并显示编辑表单。

updateUser方法用于保存编辑后的用户信息，通过找到要编辑的用户在users数组中的索引，将编辑后的用户信息替换原来的用户信息。

cancelEdit方法用于取消编辑，将editingUser设置为null，隐藏编辑表单。

deleteUser方法用于删除用户，通过找到要删除的用户在users数组中的索引，将其从数组中移除。

在模板中，我们使用v-for指令遍历users数组，显示用户列表。对于每个用户，我们显示其姓名和邮箱，并提供编辑和删除按钮。

通过在表单和按钮上绑定事件监听器，我们可以调用相应的方法来执行增删改查操作。

此示例演示了如何使用Vue 3.0编写一个简单的增删改查功能。你可以根据自己的需求进行扩展和修改