vue实现用户信息列表的展示和增删改查的操作原码

以下是一个使用Vue实现用户信息列表的展示和增删改查的操作的原码示例：

HTML：

<div id="app">
  <h1>用户信息列表</h1>
  <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>

  <h2>添加/编辑用户</h2>
  <form @submit.prevent="saveUser">
    <label>
      姓名：
      <input type="text" v-model="currentUser.name" required>
    </label>
    <label>
      年龄：
      <input type="number" v-model="currentUser.age" required>
    </label>
    <button type="submit">{{ editingUser ? '保存' : '添加' }}</button>
  </form>
</div>

JavaScript：

new Vue({
  el: '#app',
  data: {
    users: [
      { id: 1, name: '张三', age: 20 },
      { id: 2, name: '李四', age: 25 },
      { id: 3, name: '王五', age: 30 }
    ],
    currentUser: { id: null, name: '', age: '' },
    editingUser: false
  },
  methods: {
    editUser(user) {
      this.currentUser = Object.assign({}, user)
      this.editingUser = true
    },
    deleteUser(user) {
      const index = this.users.indexOf(user)
      this.users.splice(index, 1)
    },
    saveUser() {
      if (this.editingUser) {
        const index = this.users.findIndex(user => user.id === this.currentUser.id)
        this.users.splice(index, 1, this.currentUser)
      } else {
        this.currentUser.id = this.users.length + 1
        this.users.push(this.currentUser)
      }
      this.currentUser = { id: null, name: '', age: '' }
      this.editingUser = false
    }
  }
})

这个示例中，我们使用了Vue的模板语法来渲染用户信息列表和添加/编辑用户的表单。我们使用`v-for`指令来循环渲染用户列表中的每个用户，并使用`v-model`指令来双向绑定表单中输入框的值。我们还使用了一些Vue的实例方法来实现用户信息的增删改查功能。