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 的数据绑定和事件处理机制，可以轻松地实现这些操作。