具体功能
1.添加内容 删除内容
2.本地存储
3.点击更改
css部分
*{
margin: 0;
padding: 0;
}
.list {
position: relative;
}
#app{
width: 100%;
height: 900px;
background-color: #cdcdcd;
}
.h1 {
width: 100%;
height: 100px;
line-height: 100px;
background: #323232;
margin: 0 auto;
}
.h1 span{
color: #fff;
margin-left: 550px;
}
.content{
width: 600px;
height: 500px;
margin: 0 auto;
}
button{
display: none;
}
.item:hover button{
display: block;
}
.inp {
width: 400px;
height: 40px;
position: absolute;
top: 30px;
left: 800px;
border-radius: 5px;
}
h1{
margin: 10px 0px;
}
.list>.item {
width: 500px;
height: 40px;
border-radius: 5px;
line-height: 40px;
margin: 10px 0px;
background-color: #fff;
}
.list>.item #ce {
width: 10px;
height: 40px;
background-color: #629a9c;
float: left;
border-radius: 5px 0px 0px 5px;
}
.clear{
margin-left: 360px;
}
.list>.item input {
width: 20px;
height: 20px;
float: left;
margin-top: 10px;
margin-left: 10px;
}
.list>.item .inp2 {
position: absolute;
width: 200px;
height: 30px;
top: -8px;
}
.list>.item span {
float: left;
margin-left: 10px;
}
.list>.item button {
width: 20px;
height: 20px;
line-height: 20px;
float: right;
margin-top: 10px;
margin-right: 10px;
border-radius: 50%;
}
html部分
<div id="app">
<h1 class="h1">
<span>ToDolist</span></h1>
<div class="content">
<input class="inp" type="text"
placeholder="添加todo"
v-model.trim="temp"
@keyup.enter="addItem()" />
<h1>正在进行</h1>
<div class="list" >
<div class="item" v-for="item in dolist" :key="item.title">
<div id="ce"></div>
<input type="checkbox" v-model="item.done" />
<span
@dblclick="editTemp=item.title;item.state=1"
v-show="item.state==0">
{{item.title}}</span>
<input type="text" class="inp2"
v-model="editTemp"
v-show="item.state==1"
@keyup.enter="item.title=editTemp;item.state=0;"
@blur="item.title=editTemp;item.state=0;"
@keyup.esc="item.state=0;editTemp=item.title;"
v-focus="item.state==1"
>
<button type="button" @click="delItem(item)"></button>
</div>
</div>
<h1>已经完成</h1>
<div class="list">
<div class="item" v-for="item in undolist" :key="item.title" style="opacity: .5;">
<div id="ce"></div>
<input type="checkbox" v-model="item.done" />
<span @dblclick="editTemp=item.title;item.state=1"
v-show="item.state==0">
{{item.title}}</span>
<input type="text" class="inp2"
v-model="editTemp"
v-show="item.state==1"
@keyup.enter="item.title=editTemp;item.state=0;"
@blur="item.title=editTemp;item.state=0;"
@keyup.esc="item.state=0;editTemp=item.title;"
v-focus="item.state==1"
>
<button type="button" @click="delItem(item)"></button>
</div>
</div>
<p>
<span style="color: #00FFFF;" v-if="list.length!=0"><b>{{list.length}}</b> Strip data</span>
<span v-show="list.length!=0" @click="clear" class="clear" style="cursor: pointer; color: #00FFFF;">clear</span>
</p>
</div>
</div>
js部分
<script type="text/javascript">
new Vue({
el: "#app",
watch:{
"list":{
handler(nval){
localStorage.setItem("list",JSON.stringify(this.list))
},
deep:true
}
},
computed:{
dolist(){
return this.list.filter(item=>!item.done);
},
undolist(){
return this.list.filter(item=>item.done);
}
},
data:{
//通过本地存储来存储数据
list:JSON.parse(localStorage.getItem("list")||"[]"),
temp:"" ,
editTemp:"",
},
methods:{
//添加
addItem(){
var item = {title:this.temp,done:false,state:0}
this.list.unshift(item);
this.temp = "";
},
//删除
delItem(item) {
var ind = this.list.findIndex(value => value.title === item.title);
this.list.splice(ind, 1);
},
clear:function(){
this.list = []
}
},
directives:{
"focus":{
update(el,binding){
if(binding.value){el.focus()}
}
}
}
})
</script>