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