使用 Vue.js 开发一个待办事项列表（To-Do List）下面是一个简单的 Vue.js 待办事项列表的实现步骤和示例代码。
步骤
-
创建 Vue 项目：如果还没有 Vue 项目，可以使用 Vue CLI 创建一个新的 Vue 项目。
-
设计数据结构：确定待办事项列表的数据结构，通常包括任务文本、完成状态等。
-
创建 Vue 组件：创建一个或多个 Vue 组件来展示和管理待办事项。
-
实现数据绑定和事件处理：使用 Vue 的数据绑定和事件处理机制来添加、删除和修改待办事项。
-
样式美化：使用 CSS 或框架（如 Bootstrap）来美化待办事项列表。
示例代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js To-Do List</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
/* 简单的样式美化 */
.todo-list {
list-style-type: none;
padding: 0;
}
.todo-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.todo-item .delete {
cursor: pointer;
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>待办事项列表</h1>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入新任务">
<ul class="todo-list">
<li v-for="(todo, index) in todos" :key="index" class="todo-item">
<span>{{ todo.text }}</span>
<span class="delete" @click="deleteTodo(index)">删除</span>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
newTodo: '',
todos: []
},
methods: {
addTodo() {
if (this.newTodo.trim() !== '') {
this.todos.push({ text: this.newTodo.trim() });
this.newTodo = '';
}
},
deleteTodo(index) {
this.todos.splice(index, 1);
}
}
});
</script>
</body>
</html>
说明
- HTML：定义一个简单的页面结构，包括一个输入框用于输入新任务，和一个列表用于展示待办事项。
- Vue 实例：创建一个新的 Vue 实例，并挂载到
#app元素上。 - 数据：定义
newTodo用于存储新任务的文本，和todos数组用于存储所有待办事项。 - 方法：
addTodo：当用户按下回车键时调用，将新任务添加到todos数组中，并清空输入框。deleteTodo：接受一个索引作为参数，并删除对应索引的待办事项。
- 事件处理：
@keyup.enter：监听输入框的回车键事件，当按下回车键时调用addTodo方法。@click：监听删除按钮的点击事件，当点击时调用deleteTodo方法并传递当前待办事项的索引。
- 样式：使用简单的 CSS 样式来美化待办事项列表。
