Vue案例——TodoList
vue TodoList案例
这个案例主要实现了添加、列表的显示、正在进行、已完成、localstorage本地保存、事项数量的更新、还有清空所有等功能。
代码部分如下:
HTML部分:
<div id="app" v-cloak>
<header class="header">
<section>
<form action="javascript:postaction()" id="form">
<label for="title">TodoList</label>
<input type="text" id="title" name="title" autocomplete="off" placeholder="添加ToDo" v-model="title" @keyup.enter="add()">
</form>
</section>
</header>
<main>
<section>
<h2 style="color:crimson ;">正在进行<span>{{this.list.length-this.num()}}</span></h2>
<ol id="todolist" class="">
<li v-for="(item,key) in list" :key="key" v-show="!item.flag">
<input type="checkbox" v-model="item.flag" >
<p @click="change(key)">
<span v-show="!item.show">{{item.title}}</span>
<input type="text" v-model="item.title" v-show="item.show" @blur="savelist(key)">
</p>
<a @click="cancel()">X</a>
</li>
</ol>
<h2 style="color: lime;">已完成<span>{{this.num()}}</span></h2>
<ul>
<li v-for="(item,key) in list" :key="key" v-show="item.flag">
<input type="checkbox" v-model="item.flag" >
<p @click="change(key)">
<span v-show="!item.show">{{item.title}}</span>
<input type="text" v-model="item.title" v-show="item.show" @blur="savelist(key)">
</p>
<a @click="cancel()">X</a>
<!--删除功能 -->
</li>
</ul>
</section>
</main>
<footer class="footer">
Copyright © 2020 todolist.cn
<a href="javascript:DeleteAll()" @click="DeleteAll()">clear</a>
<!--清空列表 -->
</footer>
</div>
CSS部分:
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
}
body {
font-size: 16px;
background: darkgray;
}
div[v-cloak]{
display: none;
}
/* 头部开始 */
.header{
height: 50px;
background-color: #333;
background: rgba(47,47,47,0.98);
}
section {
margin: 0 auto;
}
section {
width: 600px;
padding: 0 10px;
}
label{
float: left;
width: 100px;
line-height: 50px;
color: #ddd;
font-size: 23px;
cursor: pointer;
}
header>section form>input{
float:right;
width: 60%;
height: 25px;
margin-top: 12px;
border-radius: 5px;
text-indent: 10px;
border: none;
outline: none;
}
.section{
margin-top: 30px;
}
/* 头部结束 */
/* ================== */
/* 身体部分 */
h2{
position: relative;
}
h2:nth-of-type(2) {
margin-top: 20px;;
}
li>input {
position: absolute;
top: 6px;
left: 10px;
width: 22px;
height: 22px;
cursor: pointer;
}
li {
height: 33px;
line-height: 33px;
background-color: #fff;
position: relative;
padding: 0 45px;
margin-bottom: 10px;
border-left: 5px solid lawngreen;
margin-top: 20px;;
}
li p input {
top: 3px;
left: 40px;
width: 70%;
height: 20px;
line-height: 14px;
text-indent: 6px;
font-size: 15px;
}
li a {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
width: 14px;
height: 12px;
border-radius: 14px;
border: 6px double #FFF;
background: #CCC;
line-height: 14px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 15px;
cursor: pointer;
}
h2 span {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
padding: 0 5px;
height: 20px;
border-radius: 20px;
background: #E6E6FA;
line-height: 22px;
text-align: center;
color: #666;
font-size: 15px;
}
/* 身体部分 */
/* ============== */
/* ============== */
/* 尾部 */
.footer {
color: #666;
font-size: 14px;
text-align: center;
margin-top: 30px;
}
</style>
JS部分:
<!--我这里是用的线上引用地址 -->
<script src="http://www.jq22.com/jquery/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
title:"",
list:JSON.parse(localStorage.getItem("to")) || []
},
methods: {
//出发回车键盘按钮的时候进行添加
add() {
if(this.title=="") return false;
this.list.push({title:this.title,flag:false,show:false});
localStorage.setItem("to",JSON.stringify(this.list))
this.title = "";
},
change(key){
for(var i in this.list) {
this.list[i].show = false;
}
this.list[key].show = true;
},
//当鼠标失去焦点的时候、
savelist(key) {
this.list[key].show = false;
},
//删除每条信息
cancel(e) {
this.list.splice(e,1);
localStorage.setItem("to",JSON.stringify(this.list));
},
// 判断状态中的个数
num(){
let count = 0 ;
this.list.forEach(e => {
if(e.flag == true) {
count++;
}
});
return count;
localStorage.setItem("to",JSON.stringify(this.list));
},
//清空数组
DeleteAll(){
this.list =[];
localStorage.setItem("to",JSON.stringify(this.list));
}
},
})
</script>
案例来自TodoList官网,小编呢就按照官网上给的功能用自己的方法写了一遍,网址:http://www.todolist.cn/;