83 lines
2.1 KiB
Vue
83 lines
2.1 KiB
Vue
<template>
|
||
<div class="app">
|
||
<div>
|
||
<button @click="isok = false">未完成</button>
|
||
<button @click="isok = true">已完成</button>
|
||
</div>
|
||
<div v-show="!isok">
|
||
<div v-for="(item,index) in list" :key="index" v-show="item.isok == false">
|
||
<input type="checkbox" name="list" @click="setstate(index)" v-bind:id="'f-' + index" :checked="item.isok" /><label :for="'f-' + index" @click="setstate(index)">{{item.name}}</label><button v-on:click="remove(index)">删除</button>
|
||
</div>
|
||
</div>
|
||
<div v-show="isok">
|
||
<div v-for="(item,index) in list" :key="index" v-show="item.isok == true">
|
||
<input type="checkbox" name="list" @click="setstate(index)" :id="'t-' + index" :checked="item.isok" /><label @click="setstate(index)" :for="'t-' + index">{{item.name}}</label><button @click="remove(index)">删除</button>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
添加任务：<input type="text" v-model="todoname" @keyup.enter="add" /><button @click="add">添加</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
name: 'App',
|
||
components: {
|
||
},
|
||
data(){
|
||
return {
|
||
isok:false,
|
||
list:[{
|
||
name:"默认代办",
|
||
isok:false
|
||
}],
|
||
todoname:"",
|
||
time:0
|
||
}
|
||
},
|
||
methods:{
|
||
add(){
|
||
this.list.push({name: this.todoname,isok: false});
|
||
this.todoname = "";
|
||
localStorage.setItem("list",JSON.stringify(this.list))
|
||
},
|
||
remove(index){
|
||
this.list.splice(index,1),
|
||
localStorage.setItem("list",JSON.stringify(this.list))
|
||
},
|
||
setstate(index){
|
||
if(this.time){
|
||
clearTimeout(this.time)
|
||
this.time = 0;
|
||
}
|
||
this.time = setTimeout(()=>{
|
||
this.list[index].isok = !this.list[index].isok;
|
||
this.$forceUpdate();
|
||
localStorage.setItem("list",JSON.stringify(this.list))
|
||
|
||
},100)
|
||
}
|
||
},
|
||
mounted(){
|
||
let list = localStorage.getItem("list");
|
||
this.list = list ? JSON.parse(list) : [{
|
||
name:"默认代办",
|
||
isok:false
|
||
}]
|
||
},
|
||
watch:{
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.app{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
</style>
|