<div id="app"> 添加任务: <input type="text" v-model.trim=todo name="" @keyUp.13=add> <div class="nav"> <a href="#all" v-if="lists.length">所有任务<i>{{lists.length}}</i></a> <a href="#wwc" v-if="lists.length">未完成的任务<i>{{nochecked}}</i></a> <a href="#wc" v-if="lists.length">已完成的任务<i>{{checked}}</i></a> <!-- <a href="#dele" v-if="overlist.length">删除的任务<i>{{overlist.length}}</i></a> --> </div> <p v-if="!lists.length">还没有任务呀</p> <ul class="list"> <li :class="{active:item.ischeck,editing:edittodo===item}" v-for="item in filterlist"> <label @dblclick="edit(item)">{{item.title}}</label> <input type="text" class="text" v-model="item.title" v-focus="edittodo==item" @blur=editok @keyUp.esc=regret(item)> <input type="checkbox" name="" id="" v-model="item.ischeck"> <span @click="removetodo(item)">X</span> </li> </ul> </div> <script type="text/javascript"> //存取 var save = (key, value) => { localStorage.setItem(key, JSON.stringify(value)) } var fetch = (key) => { return JSON.parse(localStorage.getItem(key)) || [] } var list = [ // { // title: "吃饭", // ischeck: false // }, { // title: "睡觉", // ischeck: true // } ] var list = fetch("text-vue"); var fiterlist = { "all": function(lists) { return lists; }, "wwc": function(lists) { return lists.filter(function(item) { return !item.ischeck; }) }, "wc": function(lists) { return lists.filter(function(item) { return item.ischeck; }) } } var app = new Vue({ el: '#app', data: { lists: list, overlist: [], todo: "", edittodo: "", //修改 beforetodo: "", //记录修改之前 visibility: "all" }, watch: { lists: { handler: function() { save("text-vue", this.lists) }, deep: true } }, computed: { checked:function(){ return this.lists.filter(function(item) { return item.ischeck; }).length; }, nochecked: function() { return this.lists.filter(function(item) { return !item.ischeck; }).length; }, filterlist: function() { return fiterlist[this.visibility] ? fiterlist[this.visibility](this.lists) : this.lists; } }, methods: { add() { if(this.todo){ this.lists.push({ "title": this.todo, ischeck: false }); this.todo = ""; } }, removetodo(item) { if(item.ischeck){ this.overlist.push(item); var index = this.lists.indexOf(item); this.lists.splice(index, 1) } }, edit(item) { this.edittodo = item; this.beforetodo = item.title; }, editok(item) { this.edittodo = ""; }, regret(item) { //返回 item.title = this.beforetodo this.beforetodo = ""; this.edittodo = ""; } }, directives: { "focus": { update(el, binding) { if (binding.value) { el.focus(); } } } } }); var hashnow = () => { var hash = window.location.hash.slice("1"); app.visibility = hash; } hashnow() window.addEventListener("hashchange", hashnow) </script>