直接复制就能使用
<template>
<div>
<header>
<section>
<label for="">ToDoList</label>
<input type="text" placeholder="添加ToDo" v-model="title" @keydown.enter="add()">
</section>
</header>
<section>
<h2>正在进行<span>{{this.list.length-fun}}</span></h2>
<ol>
<li v-for="(item,key) in list" :key="key" v-show="!item.flag">
<input type="checkbox" v-model="item.flag">
<p v-show="!item.show" @click="change(key)">{{item.title}}</p>
<a href="#" @click="del(key)">-</a>
<!-- 修改数据 -->
<input class="txt1" type="text" v-model="item.title" v-show="item.show" @blur="blur(key)">
</li>
</ol>
<h2>已经完成<span>{{fun}}</span></h2>
<ul>
<li v-for="(item,key) in list" :key="key" v-show="item.flag">
<input type="checkbox" v-model="item.flag">
<p v-show="!item.show" @click="change(key)">{{item.title}}</p>
<a href="#" @click="del(key)">-</a>
<!-- 修改数据 -->
<input class="txt1" type="text" v-model="item.title" v-show="item.show" @blur="blur(key)">
</li>
</ul>
</section>
</div>
</template>
<script>
export default{
data(){
return{
// 定义一个字符串与input实现双向数据绑定
title:"",
// 定义一个空数组接收输入的数据
list:JSON.parse(localStorage.getItem("list"))||[]
}
},
methods:{
add(){
if(this.title==""){
return false
}else{
// 定义一个对象接收输入的title值
var obj={
title:this.title,
// 之前都是定义在json文件中
// 控制input框
flag:false,
// 控制显示隐藏
show:false
}
// 将obj的内容push进空数组然后循环渲染
this.list.push(obj)
this.title=""
localStorage.setItem("list",JSON.stringify(this.list))
}
},
// 删除事件
del(key){
this.list.splice(key,1)
localStorage.setItem("list",JSON.stringify(this.list))
},
// 显示出改变数据
change(key){
this.list[key].show=true
localStorage.setItem("list",JSON.stringify(this.list))
},
// 失去焦点事件
blur(key){
this.list[key].show=false
localStorage.setItem("list",JSON.stringify(this.list))
}
},
// 计算数量
computed:{
fun(){
var sum=0;
for(var i in this.list){
if(this.list[i].flag){
sum++
}
}
return sum
}
}
}
</script>
<style scoped lang="scss">
body {margin:0;padding:0;font-size:16px;background: #CDCDCD;}
header {height:50px;background:#333;background:rgba(47,47,47,0.98);}
section{margin:0 auto;}
label{float:left;width:100px;line-height:50px;color:#DDD;font-size:24px;cursor:pointer;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
header input{float:right;width:60%;height:24px;margin-top:12px;text-indent:10px;border-radius:5px;box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;border:none}
input:focus{outline-width:0}
h2{position:relative;}
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:14px;}
ol,ul{padding:0;list-style:none;}
li input{position:absolute;top:2px;left:10px;width:22px;height:22px;cursor:pointer;}
p{margin: 0;}
li p input{top:3px;left:40px;width:70%;height:20px;line-height:14px;text-indent:5px;font-size:14px;}
li{height:32px;line-height:32px;background: #fff;position:relative;margin-bottom: 10px;
padding:0 45px;border-radius:3px;border-left: 5px solid #629A9C;box-shadow: 0 1px 2px rgba(0,0,0,0.07);}
ol li{cursor:move;}
ul li{border-left: 5px solid #999;opacity: 0.5;}
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:14px;cursor:pointer;}
footer{color:#666;font-size:14px;text-align:center;}
footer a{color:#666;text-decoration:none;color:#999;}
@media screen and (max-device-width: 620px) {section{width:96%;padding:0 2%;}}
@media screen and (min-width: 620px) {section{width:600px;padding:0 10px;}}
.txt1{
width: 300px;
height: 30px;
border:1px solid;
margin-left: 40px;
}
</style>
