用基础vue写todolist

好的，首先需要安装Vue.js。可以通过以下命令安装： ``` npm install vue ``` 然后，我们可以开始编写代码。以下是一个基本的todolist示例： index.html ```html <!DOCTYPE html> <html> <head> <title>Todo List</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>Todo List</h1> <input v-model="newTodo" @keyup.enter="addTodo"> <ul> <li v-for="(todo, index) in todos" :key="index"> {{ todo }} <button @click="removeTodo(index)">Remove</button> </li> </ul> </div> <script src="app.js"></script> </body> </html> ``` app.js ```javascript new Vue({ el: '#app', data: { newTodo: '', todos: [] }, methods: { addTodo: function() { if (this.newTodo.trim() !== '') { this.todos.push(this.newTodo); this.newTodo = ''; } }, removeTodo: function(index) { this.todos.splice(index, 1); } } }); ``` 在这个例子中，我们使用了Vue的双向数据绑定来处理用户输入的新任务。当用户按下回车键时，我们将新任务添加到任务列表中，并清空输入框。我们还提供了一个删除按钮，允许用户从列表中删除任务。这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。

阅读全文