请使用vue写一个前端增删改查代码

好的，以下是一个简单的示例代码，使用Vue实现前端的增删改查功能：

HTML部分：

<div id="app">
  <h2>Todo List</h2>
  <form @submit.prevent="addTodo">
    <input type="text" v-model="newTodo" placeholder="Add new task">
    <button type="submit">Add</button>
  </form>
  <ul>
    <li v-for="(todo, index) in todos">
      {{ todo.task }}
      <button @click="deleteTodo(index)">Delete</button>
      <button @click="editTodo(index)">Edit</button>
    </li>
  </ul>
  <div v-if="editing">
    <input type="text" v-model="editTodo.task">
    <button @click="saveEdit">Save</button>
  </div>
</div>

Vue部分：

new Vue({
  el: '#app',
  data: {
    todos: [
      { task: 'Learn Vue' },
      { task: 'Build a web app' },
      { task: 'Deploy to production' }
    ],
    newTodo: '',
    editing: false,
    editTodo: {}
  },
  methods: {
    addTodo() {
      this.todos.push({ task: this.newTodo })
      this.newTodo = ''
    },
    deleteTodo(index) {
      this.todos.splice(index, 1)
    },
    editTodo(index) {
      this.editing = true
      this.editTodo = Object.assign({}, this.todos[index])
    },
    saveEdit() {
      const index = this.todos.findIndex(todo => todo.task === this.editTodo.task)
      this.todos.splice(index, 1, this.editTodo)
      this.editing = false
      this.editTodo = {}
    }
  }
})

这个示例实现了一个简单的Todo List，可以添加、删除和编辑任务。当点击“Edit”按钮时，任务会进入编辑状态，此时可以修改任务名称并保存。