增刪便籤任務
阿新 • • 發佈：2020-08-24
<!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 class="active" href="#all">所有任務</a> <a href="#unfinished">未完成的任務</a> <a href="#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>