效果图
todolist.gif
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.divHeight{line-height: 40px;}
.divFloat{float: right;}
.divTitle label{color:white;}
.divBlackBanner{background-color:rgb(48,48,48);height: 40px;}
.inputAdd{
border-radius:6px;
width: 180px;
}
.bFont{font-size: 600;}
.divMain{
background-color:rgb(199,199,199);
height: 600px;
}
.divMain ul{padding-left: 0px;}
.heightLi{height: 35px;}
.divContent{
width: 400px;
margin: -40px auto;
}
.labelRadius{
float:right;
width:24px;
height:24px;
line-height:24px;
border-radius:50%;
background-color:rgb(222,222,246);
text-align:center;
font-size: xx-small;
margin: 8px auto;
}
.btnRight{
float: right;
background: url(image/btn_simle.png);
width: 12px;
height: 12px;
border: none;
background-size: 100% 100%;
margin:8px 5px auto;
}
.divMain li{
list-style:none;
}
.liBanner{
background-color: green;
}
.divliBgClear{
background-color:clear;
padding-left: 10px;
}
.divliBgClear_white{
background-color:white;
height: 30px;
}
.divGrayitem{
background-color:rgb(199,199,199);
height: 5px;
}
</style>
</head>
<body>
<div id="todolist" class="divMain">
<div class="divBlackBanner"></div>
<div class="divContent">
<div class="divTitle divHeight">
<label >TodoList</label>
<div class="divFloat">
<input class="inputAdd" type="text" v-model="inputContent" placeholder="添加todo" @keyDown = "add($event)"/>
</div>
</div>
<div id="doingList">
<div class="divHeight">
<b class="bFont" >正在进行</b>
<label class="labelRadius">{{countDoing}}</label>
</div>
<div>
<ul>
<li class="heightLi" v-for="(item,index) in tolist" v-if="!item.checked" style="background-color: green;">
<div class="divliBgClear">
<div class="divliBgClear_white">
<input type="checkbox" @change="aciton_checkbox(item.checked)" v-model="item.checked"/>
<span style="font-size: small">{{item.text}}</span>
<button class="btnRight" @click="btnDelete(index)"></button>
<div style="clear:both"></div>
</div>
</div>
<div class="divGrayitem"></div>
</li>
</ul>
</div>
</div>
<div id="doingList">
<div class="divHeight">
<b class="bFont" >已经完成</b>
<label class="labelRadius">{{countFinish}}</label>
</div>
<div>
<ul>
<li class="heightLi" v-for="(item,index) in tolist" v-if="item.checked" style="background-color: gray;opacity: 0.4;">
<div class="divliBgClear">
<div class="divliBgClear_white">
<input type="checkbox" @change="aciton_checkbox(item.checked)" v-model="item.checked"/>
<span style="font-size: small">{{item.text}}</span>
<button class="btnRight" @click="btnDelete(index)"></button>
<div style="clear:both"></div>
</div>
</div>
<div class="divGrayitem"></div>
</li>
</ul>
</div>
</div>
<div style="width:100%;text-align: center;color: gray;font-size: xx-small">
Copyright @ 2014 dcits.com clear
<!-- <label style="margin:0px auto;" text-align="center">Copyright @ 2014 dcits.com clear</label> -->
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script type="text/javascript">
var vue = new Vue({
el:"#todolist",
data:{
countDoing:0,
countFinish:0,
inputContent:"",
tolist:[],
},
methods: {
btnDelete(index_P){
var item = this.tolist[index_P];
if (item.checked == false){
this.countDoing--;
}else{
this.countFinish --;
}
this.tolist.splice(index_P,1);
this.saveData();
},
add(e){
console.log(e);
if(e.keyCode == 13){
//回车
if(this.inputContent.length > 0){
this.tolist.push({"text":this.inputContent,"checked":false});
this.countDoing ++;
this.saveData();
this.inputContent = '';
}
}
},
aciton_checkbox(isCheck){
if(isCheck == false){
this.countDoing ++;
this.countFinish --;
}else{
this.countDoing --;
this.countFinish ++;
}
this.saveData();
},
saveData(){
console.log(this.tolist);
localStorage.setItem('tolist',JSON.stringify(this.tolist));
},
getData(){
var tolist = JSON.parse(localStorage.getItem('tolist'));
if(tolist){
this.tolist = tolist;
}
}
},mounted() {
this.getData();
var count = 0;
for (var index = 0; index < this.tolist.length; index++) {
dic = this.tolist[index];
if(dic.checked == false){
count++;
}
}
this.countDoing = count;
this.countFinish = this.tolist.length - count;
},
created() {
}
});
</script>
</body>
</html>
```
网友评论