vue2 增删改查的页面

这里是一个简单的 Vue2 增删改查页面的示例代码：

<template>
  <div>
    <h1>用户管理</h1>
    <form>
      <label for="name">姓名：</label>
      <input type="text" v-model="user.name">
      <br>
      <label for="email">邮箱：</label>
      <input type="email" v-model="user.email">
      <br>
      <button v-if="!editing" @click.prevent="addUser">添加用户</button>
      <button v-else @click.prevent="saveUser">保存修改</button>
    </form>
    <hr>
    <ul>
      <li v-for="(user, index) in users" :key="index">
        {{ user.name }} - {{ user.email }}
        <button @click.prevent="editUser(index)">编辑</button>
        <button @click.prevent="deleteUser(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: '张三', email: 'zhangsan@example.com' },
        { name: '李四', email: 'lisi@example.com' },
      ],
      user: {
        name: '',
        email: '',
      },
      editing: false,
      editingIndex: null,
    };
  },
  methods: {
    addUser() {
      if (this.user.name && this.user.email) {
        this.users.push({
          name: this.user.name,
          email: this.user.email,
        });
        this.user.name = '';
        this.user.email = '';
      }
    },
    editUser(index) {
      this.editing = true;
      this.user.name = this.users[index].name;
      this.user.email = this.users[index].email;
      this.editingIndex = index;
    },
    saveUser() {
      if (this.user.name && this.user.email) {
        this.users[this.editingIndex].name = this.user.name;
        this.users[this.editingIndex].email = this.user.email;
        this.user.name = '';
        this.user.email = '';
        this.editing = false;
        this.editingIndex = null;
      }
    },
    deleteUser(index) {
      this.users.splice(index, 1);
    },
  },
};
</script>

这个页面包含一个表单用于添加用户，一个列表用于展示已有用户，并且可以编辑和删除用户。

要注意的是，这个示例代码并没有使用数据库或者服务器，所有的数据都保存在 Vue 实例中。如果你需要在实际项目中使用，需要将数据保存在服务器或者浏览器的本地存储中。