To Do List完成代办事项:
<template>
<div id="app">
<div class="text-left title">
<span>To Do List</span>
<input @keydown="addList" class="userin" type="text" placeholder="请输入...">
</div>
<div>
<p class="h6 un_thing">未完成事项:</p>
<ul>
<!-- v-if指令:判断是否成立 -->
<li v-if="!item.ishow" v-for="(item,index) in lists" :key="index">
<input @click="changeShow(index)" type="checkbox" :checked="item.ishow">
{{item.title}}--------------<button @click="deletelist(index)">删除</button>
</li>
</ul>
<p class="h6 un_thing">已完成事项:</p>
<ul>
<li v-if="item.ishow" v-for="(item,index) in lists" :key="index">
<input @click="changeShow(index)" type="checkbox" :checked="item.ishow">
{{item.title}}--------------<button @click="deletelist(index)">删除</button>
</li>
</ul>
</div>
</div>
</template>
<script>
export default{
name:"app",
data(){
return{
lists:[
{
title:"JavaScript录制",
ishow:false
},
{
title:"Vue录制",
ishow:true
}
]
}
},
// 当前组件渲染完成之后,执行这个方法
mounted(){
//组件挂载完成
this.lists=this.getStorage();
},
methods:{
// 增加数据
addList(e){
if(e.keyCode===13){
let ele=e.target.value;
if(ele.length!=0){
this.lists.push({
title:ele,
ishow:false
});
e.target.value="";
this.saveStorage();
}
}
},
// 修改数据
changeShow(key){
this.lists[key].ishow=!this.lists[key].ishow;
this.saveStorage();
},
// 删除数据
deletelist(index){
this.lists.splice(index,1);
this.saveStorage();
},
//写入缓存
saveStorage(){
localStorage.setItem("todo",JSON.stringify(this.lists));
},
//读缓存
getStorage(){
return JSON.parse(localStorage.getItem("todo"));
}
}
}
</script>
<style>
#app{
width: 500px;
min-height: 300px;
border: 1px solid black;
margin: 0 auto;
}
.title{
line-height: 30px;
background-color: black;
color: white;
padding-left: 15px;
}
.userin{
position: relative;
top: -2px;
left: 40px;
width: 200px;
outline: none;
border-radius: 5px;
border-style: none;
padding-left: 10px;
font-size: 13px;
}
.un_thing{
padding-left: 10px;
}
</style>
注:条件渲染(v-if)
v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回true值的时候被渲染