vue 增删改查

Vue.js 是一款流行的 JavaScript 框架，常用于构建单页面应用程序（SPA）。下面是一个简单的 Vue.js 实例，演示如何使用 Vue.js 实现增删改查操作：

HTML 代码：

<div id="app">
  <h1>Vue.js Todo List</h1>
  <form @submit.prevent="addTodo">
    <input type="text" v-model="newTodo">
    <button type="submit">Add Todo</button>
  </form>
  <ul>
    <li v-for="(todo, index) in todos" :key="index">
      {{ todo }}
      <button @click="deleteTodo(index)">Delete</button>
    </li>
  </ul>
</div>

JavaScript 代码：

new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: []
  },
  methods: {
    addTodo: function () {
      if (this.newTodo) {
        this.todos.push(this.newTodo);
        this.newTodo = '';
      }
    },
    deleteTodo: function (index) {
      this.todos.splice(index, 1);
    }
  }
});

上面的代码演示了一个简单的 Todo List 应用程序。用户可以通过表单添加新的 Todo 事项，也可以通过点击 Delete 按钮删除已有的 Todo 事项。在这个例子中，我们使用了 Vue.js 的 v-model 指令来绑定表单输入框的值，使用了 v-for 指令来遍历 Todo 列表，以及使用了 v-on 指令来绑定表单提交事件和删除按钮点击事件。

这只是一个简单的例子，实际应用中可能需要更复杂的增删改查操作。但是，通过使用 Vue.js 的数据绑定和事件处理机制，可以轻松地实现这些操作。