首页vue.js待办事项清单代码

vue.js待办事项清单代码

时间: 2024-09-19 22:11:31 浏览: 54

Vue.js创建待办事项清单的基本步骤可以分为以下几个部分： 1. 首先，引入Vue.js库和数据绑定基本语法。在HTML中添加`<script src="https://cdn.jsdelivr.net/npm/vue@latest"></script>`，并在一个根元素上使用`v-model`指令声明数据： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Todo List</title> </head> <body> <div id="app"> <input v-model="newItem" placeholder="Add new item..."> <ul> <li v-for="(item, index) in items" :key="index"> {{ item }} <button @click="deleteItem(index)">Delete</button> </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@latest"></script> <script> const app = new Vue({ el: '#app', data: { newItem: '', items: [], }, methods: { addItem() { if (this.newItem.trim()) { this.items.push(this.newItem); this.newItem = ''; } }, deleteItem(index) { this.items.splice(index, 1); }, }, }); </script> </body> </html> ``` 在这个例子中： - `v-model`用于双向数据绑定输入框的内容到`newItem`变量。 - `v-for`遍历数组`items`并渲染每个项目，通过`:key`属性保证唯一标识。 - `addItem`方法在用户点击“添加”按钮时添加新项，`deleteItem`方法删除选中的项目。

阅读全文