<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>增删便签任务</title>
<script type="text/javascript" src="js/vue.js"></script>
<style>
body{
background: #fafafa;
margin: 0;
font-family: "微软雅黑";
}
.completed{
text-decoration: line-through;
}
li{
list-style: none;
}
.todo-list{
padding: 0;
margin: 0;
list-style: none;
}
.todo-list li{
position: relative;
font-size: 16px;
border-bottom: 1px solid #ededed;
}
.todo-list li:hover{
background: #FAFAFA;
}
.todo-list li label{
white-space: pre-line;
word-break: break-all;
padding: 15px 60px 15px 15px;
}
.todo-list li .edit{
display: none;
}
.todo-list li.editing .edit{
display: block;
width: 506px;
padding: 13px 17px 12px 17px;
}
</style>
</head>
<body>
<div class="page-top">
<div class="page-content">
<h2>任务计划列表</h2>
</div>
</div>
<div class="main">
<h3 class="big-title">添加任务：</h3>
<input placeholder=""
class="task-input"
type="text"
v-on:keyup.enter="addTodo"
v-model="todo"
/>
<ul class="task-count" v-show="list.length">
<li>
{{noCheckeLength}}
个未完成任务</li>
<li class="action">
<a href="#all" :class="{active：visibility==='all'}">所有任务</a>
<a href="#unfinished" :class="{active：visibility==='unfinished'}">未完成的任务</a>
<a href="#finished" :class="{active：visibility==='#finished'}">完成的任务</a>
</li>
</ul>
<h3 class="big-title">任务列表：</h3>
<div class="tasks">
<span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
<!--<span class="no-task-tip tip-toggle">
<input checked="" class="toggle" type="checkbox" />
<span>全标记为完成</span>
</span>-->
<ul class="todo-list">
<li class="todo"
:class="{completed:item.isChecked,editing:item===edtorTodos}"
v-for="item in filteredList">
<div class="view">
<input class="toggle" type="checkbox" v-model="item.isChecked"/>
<label @dblclick="edtorTodo(item)">{{item.title}}</label>
<button class="destroy" @click="deleteTodo(item)">✘</button>
</div>
<input
v-foucs="edtorTodos===item"
class="edit"
type="text"
v-model="item.title"
@blur="edtorTodoed(item)"
@keyup.13="edtorTodoed(item)"
@keyup.esc="cancelTodo(item)"
/>
</li>
</ul>
</div>
</div>
</body>
<script>
//存取localStorage中的数据
var store={
save(key,value){
localStorage.setItem(key,JSON.stringify(value))
},
fetch(key){
return JSON.parse(localStorage.getItem(key))||[];
}
}
//取出所有的值
var list=store.fetch('miaov-new-class');
//过滤的时候有三种情况:all finished unfinished
var filter={
all:function(list){
return list;
},
finished:function(){
return list.filter(function(item){
return item.isChecked
})
},
unfinished:function(){
return list.filter(function(item){
return !item.isChecked
})
}
}
var vm=new Vue({
el:'.main',
data:{
list:list,
todo:'',
edtorTodos:'',//记录正在编辑的数据
beforeTitle:'',//记录正在编辑的数据的title
visibility:'all'//通过这个属性值的变化对数据进行筛选
},
watch:{
// list:function(){//监控list这个属性，当这个属性对应的值发生变化就会执行函数
// store.save("miaov-new-class",this.list);
// }
list:{
handler:function(){
store.save("miaov-new-class",this.list);
},
deep:true
}
},
computed:{
noCheckeLength:function(){
return this.list.filter(function(item){
return !item.isChecked
}).length
},
filteredList:function(){
//找到了过滤函数，就返回过滤后的数据。如果没有，返回所有数据
return filter[this.visibility]?filter[this.visibility](list):list;
}
},
methods:{
addTodo(){//添加任务
// 向list中添加一项任务
// 事件处理函数中的this指向是,当前这个根实例
this.list.push({
title:this.todo,
isChecked:false
})
this.todo=''
},
deleteTodo(todo){//删除任务
var index=this.list.indexOf(todo)
this.list.splice(index,1)
},
edtorTodo(todo){//编辑任务
//编辑任务的时候,记录一下编辑这条任务的title,方便在取消编辑的时候,重新给之前的title
this.beforeTitle=todo.title;
this.edtorTodos=todo;
},
edtorTodoed(todo){//编辑任务成功
this.edtorTodos=''
},
cancelTodo(todo){//取消编辑
todo.title=this.beforeTitle
this.beforeTitle=''
//让div显示出来,input隐藏
this.edtorTodos=''
}
},
directives:{
"foucs":{
update(el,binding){
if(binding.value){
el.focus();
}
}
}
}
});
function watchHashChange(){
var hash=window.location.hash.slice(1);
vm.visibility=hash
}
watchHashChange()
window.addEventListener("hashchange",watchHashChange)
</script>
</html>
![]()
浙公网安备 33010602011771号