VueDay11todoList的简单实现
下面是一个todoList列表的实现，包含有以下功能：
<!--
代办事项网页需求
1.移动端为主、pc端可用
2.输入框：输入待办事项
3.未完成列表：能够显示出未完成的内容，已经可以对每一项内容，进行修改（改完成，删除）
4.已完成列表：能够显示完成的内容，可以对每一项内容进行修改（改未完成，修改）
项目制作顺序：
1.写HTML结构
2.css样式
3.JavaScript功能
输入框的输入功能
未完成列表的显示功能
完成列表的显示功能
修改和删除列表的功能
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
<script src="js/lcXys.js" type="text/javascript"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
代办事项网页需求
1.移动端为主、pc端可用
2.输入框：输入待办事项
3.未完成列表：能够显示出未完成的内容，已经可以对每一项内容，进行修改（改完成，删除）
4.已完成列表：能够显示完成的内容，可以对每一项内容进行修改（改未完成，修改）
项目制作顺序：
1.写HTML结构
2.css样式
3.JavaScript功能
输入框的输入功能
未完成列表的显示功能
完成列表的显示功能
修改和删除列表的功能
-->
<div id="app">
<div class="main">
<div class="header">
<div class="logo">LcTodo</div>
<!-- 绑定回车事件,v-model绑定输入框的value值 -->
<input type="text" v-model="inputValue" id="input" @keydown.enter="enterEvent" placeholder="请输入待办事项" />
</div>
<div class="doing todo">
<h3><span class="title">正在进行</span><span class="num">{{this.doingList.length}}</span></h3>
<div class="list">
<transition-group name="slide" mode="out-in" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<div class="todoItem" v-for="item,index in doingList" :key="'doing'+index">
<input @click.prevent="checkDone(item.id)" :data-id="index" type="checkbox"/>
<div class="content">{{item.content}}</div>
<div class="del" @click="deleteItem(item.id)">删除</div>
</div>
</transition-group>
<!-- <transition-group name="slide" mode="out-in" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<div class="todoItem" v-for="item,index in doingList" :key="'doing'+index">
<input @click.prevent="checkDone(item.id)" :data-id="item.id" type="checkbox">
<div class="content">{{item.content}}</div>
<div class="del" @click="deleteItem(item.id)">删除</div>
</div>
</transition-group> -->
</div>
</div>
<div class="done todo">
<h3><span class="title">已完成</span><span class="num">{{this.doneList.length}}</span></h3>
<div class="list">
<transition-group name="slide" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<div class="todoItem" v-for="item,index in doneList" :key="'done'+index">
<input @click.prevent="checkDone(item.id)" :data-id="index" type="checkbox" checked="checked"/>
<div class="content">{{item.content}}</div>
<div class="del" @click="deleteItem(item.id)">删除</div>
</div>
</transition-group>
<!-- <transition-group name="slide" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<div class="todoItem" v-for="item,index in doneList" :key="'done'+index">
<input @click.prevent="checkDone(item.id)" :data-id="item.id" type="checkbox" checked="checked">
<div class="content">{{item.content}}</div>
<div class="del" @click="deleteItem(item.id)">删除</div>
</div>
</transition-group> -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
var app =new Vue({
el:"#app",
data:{
todoList:[],
inputValue:""
},
computed:{
// 通过过滤todoList数据，得到未做好的列表和已做好的列表
doingList:function(){
let arr = this.todoList.filter(function(item,index){
return !item.isDone
})
return arr;
},
doneList:function(){
let arr = this.todoList.filter(function(item,index){
return item.isDone
})
return arr;
}
},
methods:{
enterEvent:function(){
// 将数据添加至todoList
this.todoList.push({
content:this.inputValue,
isDone:false,
id:this.todoList.length
})
// 保存
this.saveData()
//清除输入框的值
this.inputValue=""
},
// 将数据保存到本地存储
saveData:function(){
localStorage.todoList = JSON.stringify(this.todoList)
},
checkDone:function(id){
// // 每次删除一个
// this.todoList.splice(id,1);
// this.todoList.forEach((item,i)=>{
// item.id = i;
// })
this.todoList[id].isDone = !this.todoList[id].isDone;
// 每次修改必须保存
this.saveData()
console.log(id)
},
deleteItem:function(id){
this.todoList.splice(id,1);
this.todoList.forEach(function(item,i){
item.id = i;
})
this.saveData()
}
},
mounted:function(){
this.todoList =localStorage.todoList? JSON.parse(localStorage.todoList):[];
}
})
</script>
</body>
</html>
css和js在文件上传里面
css文件为animate.min.css，style.css
js文件名为lcXys.js，vue.js，vue.min.js
js文件链接:https://files.cnblogs.com/files/peifengyang/vue.min.js
https://files.cnblogs.com/files/peifengyang/vue.js
https://files.cnblogs.com/files/peifengyang/lcXys.js
css文件链接：https://files.cnblogs.com/files/peifengyang/style.css
