vue增删改查简单实现

好的，以下是一个简单的 Vue 增删改查实现的例子：

<template>
  <div>
    <form @submit.prevent="add">
      <input type="text" v-model="name" placeholder="请输入名字">
      <button type="submit">添加</button>
    </form>
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <span>{{ item.name }}</span>
        <button @click="edit(index)">编辑</button>
        <button @click="remove(index)">删除</button>
      </li>
    </ul>
    <div v-if="editing">
      <form @submit.prevent="save">
        <input type="text" v-model="editingItem.name" placeholder="请输入修改后的名字">
        <button type="submit">保存</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      list: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ],
      editing: false,
      editingItem: {}
    }
  },
  methods: {
    add() {
      if (!this.name) return
      const id = this.list.length ? this.list[this.list.length - 1].id + 1 : 1
      this.list.push({ id, name: this.name })
      this.name = ''
    },
    edit(index) {
      this.editing = true
      this.editingItem = { ...this.list[index] }
    },
    save() {
      const index = this.list.findIndex(item => item.id === this.editingItem.id)
      this.list.splice(index, 1, this.editingItem)
      this.editing = false
      this.editingItem = {}
    },
    remove(index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

该例子中包含了添加、编辑、保存、删除等操作，具体实现思路如下：

1. 在 data 中定义 name 用来存储用户输入的名字，定义 list 用来存储所有的名字列表，定义 editing 用来表示当前是否正在编辑某个名字，定义 editingItem 用来存储正在编辑的名字对象；
2. 在模板中，使用 form 元素来实现添加操作，使用 v-for 指令来遍历 list 中的名字，使用 v-if 指令来控制编辑表单的显示与隐藏；
3. 在 methods 中，定义 add 方法来实现添加操作，如果用户没有输入名字则不添加，否则在 list 中添加一个新的名字对象，并将 name 清空；定义 edit 方法来实现编辑操作，将 editing 设置为 true，将 editingItem 设置为要编辑的名字对象；定义 save 方法来实现保存操作，在 list 中找到要编辑的名字对象的索引并替换成 editingItem，然后将 editing 和 editingItem 重置；定义 remove 方法来实现删除操作，直接在 list 中删除指定索引的名字对象；
4. 在模板中，使用 v-model 指令将用户输入的名字绑定到 name 上，使用 @submit.prevent 来阻止表单提交时刷新页面，使用 @click 来监听编辑与删除按钮的点击事件。