vue 待办事项案列
程序员文章站
2022-04-12 11:49:35
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项列表</title>
<style>
.completed {
text-decoration: line-through;
color: #666;
}
</style>
</head>
<body>
<div id="app">
<header>
<h1>待办事项列表</h1>
<h2>今日事，今日毕！</h2>
</header>
<div>
<input
type="text"
placeholder="请输入新的待办事项"
v-model="inputValue"
@keydown.enter="addTodoItem"
>
<button @click="addTodoItem">添加</button>
</div>
<!-- 显示所有待办事项 -->
<div v-if="todos.length === 0">没有待办事项，请添加</div>
<ul v-else>
<li
v-for="todo in todos"
:key="todo.id"
>
<span :class="{completed: todo.completed}">标题：{{ todo.title }}。状态：{{ todo.completed ? '已完成' : '未完成' }}。</span>
<button @click="toggleTodoItem(todo.id)">修改为{{ todo.completed ? '未' : '已' }}完成</button>
<button @click="deleteTodoItem(todo.id)">删除</button>
</li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
// 全局的 id 编号
let index = 2
new Vue({
el: '#app',
data: { // 数据
todos: [ // 保存所有待办事项
{
id: 1,
title: '复习 HTML',
completed: true
},
{
id: 2,
title: '复习 Javascript',
completed: false
}
],
inputValue: '' // 文本框中输入的新的待办事项
},
methods: { // 方法
/**
* 添加新的待办事项
*/
addTodoItem() {
if (this.inputValue.length === 0) { // 如果输入内容为空，则不添加
return
}
// 向数组中添加新的待办事项表示的对象
this.todos.push({
id: ++index,
title: this.inputValue,
completed: false
})
// 清空输入框内容
this.inputValue = ''
},
/**
* 修改状态
* @param id 待修改状态的待办事项 id
*/
toggleTodoItem(id) {
this.todos = this.todos.map(todo => {
if (todo.id === id) {
todo.completed = !todo.completed
}
return todo
})
},
/**
* 删除待办事项
*/
deleteTodoItem(id) {
this.todos = this.todos.filter(todo => todo.id !== id)
}
}
})
</script>
</body>
</html>
推荐阅读