vue.js 练手--简单ToDoList

最新推荐文章于 2020-07-08 15:07:39 发布

原创最新推荐文章于 2020-07-08 15:07:39 发布 · 337 阅读

0 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单TodoList应用案例。该应用实现了待办事项的添加、编辑、删除及标记为已完成的功能，并将已完成的任务独立展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小白自学前端，做个todolist练手（vue.js ）， css样式都没写（orz）~

HTML 代码：

<!DOCTYPE html>
<html 
lang="en">

<head>
<meta 
charset="UTF-8">
<meta 
name="viewport" 
content="width=device-width, initial-scale=1.0">
<meta 
http-equiv="X-UA-Compatible" 
content="ie=edge">
<title>todolist</title>
<script
src="https://unpkg.com/vue"></script>
</head>

<body>
<div 
id="todoList">
<header>
<input
type="text"
v-on:keyup.enter="todoAdd"
v-model="value">
</header>
<main>
<div>
<header>待办事项</header>
<ul>
<li 
v-for="value in unfinish">
<span @click="editTodo(value)"v-if='!value.edit'>{{value.value}}</span>
<input
v-else v-model="value.value" @keydown.13="saveTodo(value)"
type="text">
<button
v-on:click="todoDel(value)">删除</button>
<button @click="finish(value)">完成</button>
</li>
</ul>
</div>
<div>
<header>完成事项</header>
<ul>
<li 
v-for="value in finishtoDo">
<span>{{value.value}}</span>
<button
v-on:click="todoDel(value)">删除</button>
<button @click="redoTodo(value)">重做</button>
</li>
</ul>
</div>
</main>
</div>
<script
src="app.js"></script>
</body>

</html>

JavaScript 代码：

var test =
new Vue({
el: '#todoList',
data: {
value: '',
list: [],
},
computed: {
finishtoDo: function () {

return this.list.filter(x
=> x.finish);

},
unfinish: function () {
return this.list.filter(x
=> !x.finish);
}
},
methods: {
todoAdd: function (event) {
if (this.value ===
'') {
return
}
this.list.push({
value: this.value,
edit: false,
finish: false
});
this.value =
"";
},
todoDel: function (value) {
this.list =
this.list.filter(x
=> x !== 
value);
},
finish: function (value) {
value.finish =
true;
},
redoTodo: function (value) {
value.finish =
false;
},
editTodo: function (value) {
value.edit =
true;
},
saveTodo: function (value) {
value.edit =
false;
}
}
})