老师要求设计个todolist,就设计了一下,有不好的地方大家可以指正哈
空格键添加任务,下面各种小功能齐全
喜欢的话点个赞可否?
效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
*{
list-style: none;
margin: 0;
padding: 0;
}
.titles{
margin: auto;
width: 130px;
color: rgb(231, 94, 151);
margin-top: 10px;
margin-bottom: 10px;
/* background-color: aliceblue; */
}
.inpuselects{
width: 350px;
margin: auto;
}
.inpuselects input{
width: 350px;
border-radius: 10px;
height: 30PX;
}
#add{
border: 1px dashed red;
width: 800px;
height: 800px;
margin: auto;
position: relative;
background-color: aqua;
}
/* 被选中的特效 */
.xuanzhong{
color: #d9d9d9;
text-decoration: line-through;
transition: all 1s;
background-color: rgb(216, 24, 65);
border: 1px solid wheat;
border-radius: 10px;
height: 30px;
}
#lists{
border: 1px solid wheat;
border-radius: 10px;
height: 30px;
}
.box li{
width: 500px;
height: 30px;
margin: auto;
margin-top: 5px;
}
.box button{
float: right;
margin-top:4px;
color: white;
background-color: red;
width: 20px;
height: 20px;
}
.box label{
font-size: 20px;
text-align: center;
}
.box{
margin:10px 0;
}
.foot{
position: absolute;
bottom: 10px;
left: 10px;
}
.box{
width: 600px;
height: 600px;
overflow: scroll;
border: 2px dashed red;
margin: auto;
margin-top: 50px;
background-color: white;
}
</style>
</head>
<body>
<div id="add">
<!-- v-cloak用于防止vue未加载而出现的原始代码
当vue加载完成后,会直接删掉v-cloak这个属性所代表的意思
-->
<h1 class="titles">{{title}}</h1>
<p class="inpuselects">
<input type="text" placeholder="请输入你的小目标!" v-model="insert_data" @keyup.enter="addtodolist" autofocus ></p>
<ul class="box">
<li v-for="(val,key) in todolist">
<div :class="{xuanzhong:val.status}" id="lists">
<input type="checkbox" name="" v-model="val.status" style="margin-left: 10px;">
<label>{{val.content}}</label>
<!-- 删除触发事件,把要删除的下标传过去 -->
<button @click="dellist(key)" style="margin-right: 10px;">X</button>
</div>
</li>
</ul>
<li class="foot">当前任务总量为:<span style="color: red;">{{lengs}}</span>
<span style="margin-left: 25px;">是否全选:<input type="checkbox" @click="selectAll" v-model="ched"></span>
<button @click="lookALL" style="margin-left: 25px;">显示所有</button>
<button @click="lookisOK" style="margin-left: 25px;">显示已完成</button>
<button @click="looknotok" style="margin-left: 25px;">显示未完成</button>
<button @click="clearALL" style="margin-left: 25px;">删除已完成的</button>
</li>
</div>
<script>
// 创建一个空数组用来存储todolist的用户输入
var listDtat=[
// {id:1,content:'吃饭',status:true},
];
const vm= new Vue({
el:'#add',
data:{
title:'ToDoList' ,
insert_data:'', //用来获取用户输入
todolist:[], //用来显示数据
ched:false,
lengs:0,
todolao:[] //用来记录最原始的数组,后面显示已完成未完成功能需要用到该数据保证最原始的不变改变
},
methods: {
// 添加任务
addtodolist:function(){
if(this.insert_data==''){
alert("内容不能为空!")
}else{
// //获取数组最后一个元素的id并+1,为了防止因为删除而出现同样的id
var ids =this.todolist.length==0?1: this.todolist[this.todolist.length-1].id+1;
//获取用户输入,并把他转化成规定格式
var ob={id:ids,content:this.insert_data,status:false};
console.log(ob)
//存入到数组
this.todolist.push(ob);
//用户按下回车后自动把输入框清零
this.insert_data='';
this.lengs=this.todolist.length;
this.todolao=this.todolist
}
},
// js中事件会先执行,再去改变值,所以checkbox的状态会先改变,model值是后改变
// 全选或全不选
selectAll:function(){
// alert(this.ched);
var c=!this.ched; //点击的瞬间值是不会改变的,所以我们想获取的值应该是取反的
for(let i=0;i<this.todolist.length;i++){
this.todolist[i].status=c;
}
},
// 删除
dellist:function(key){
this.todolist.splice(key,1);
this.lengs=this.todolist.length
this.todolao=this.todolist
},
//显示全部
lookALL:function(){
this.todolist=this.todolao;
this.lengs=this.todolist.length
},
//显示已经做完的
lookisOK:function(){
this.todolist=this.todolao;
this.todolist=this.todolist.filter(function(n){
return n.status;
})
this.lengs=this.todolist.length
},
// 显示没有做完的
looknotok:function(){
this.todolist=this.todolao;
this.todolist=this.todolist.filter(function(n){
return !n.status;
})
this.lengs=this.todolist.length
},
//删除已完成
clearALL:function(){
// for(let i=0;i<this.todolist.length;i++){
// // 方法1.直接找到直接删除,但是有bug
// // if(this.todolist[i].status==true){
// // var a=this.todolist.splice([i],1);
// // this.lengs=this.todolist.length;
// // console.log(a)
// // }
// 方法2,把未完成的全部找出来,重新赋予
// var newArr = [];
// for (let i = 0; i < this.todolist.length; i++) {
// if (this.todolist[i].status == false) {
// newArr.push(this.todolist[i]);
// }
// }
// this.todolist = newArr;
// this.lengs=this.todolist.length
// //方法3,使用filter代替循环
// this.todolist=this.todolist.filter(function(n){
// //方法1:判断status的值
// // if (n.status == false) {
// // return true;
// // }
// //方法2:取反
// return !n.status;
// })
// this.todolao=this.todolist;
// this.lengs=this.todolist.length
//方法4,极简版本(箭头函数如果只有一传参,可以省略括号,如果只有一个return可以省略花括号和function还有return)
this.todolist=this.todolist.filter(n => !n.status)
this.todolao=this.todolist;
this.lengs=this.todolist.length
}
}
})
</script>
</body>
</html>