<!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>
