vue-todolist-demo

    
    
    
    


    
    

        

            
            {{user}}
             todolist
        
        

                 
                  
                  
        
        

            

                

                    
                    
                      
                
                

                    
                    {{item.content}}
                          
                          
                      
                
            
        
    
    
        new Vue({
            el: '#todolist',
            data: function () {
                var user = localStorage.getItem('todolist_user') || ''
                var list = []
                var listStr = localStorage.getItem('todolist_list')
                if (listStr) {
                    list = JSON.parse(listStr)
                }
                return {
                    isEditting: false,
                    user: user,
                    list: list
                }
            },
            watch: {
                user: function (val, oldVal) {
                    localStorage.setItem('todolist_user', val)
                },
                list: {
                    handler: function (val, oldVal) {
                        var str = JSON.stringify(val)
                        localStorage.setItem('todolist_list', str)
                    },
                    deep: true
                }
            },
            methods: {
                clickH2: function () {
                    if (!this.user) {
                        this.isEditting = true
                    }
                },
                addOne: function () {
                    var item = {
                        title: '',
                        finished: false,
                        selected: false,
                        isEditting: true
                    }
                    this.list.push(item)
                    var vm = this
                    Vue.nextTick(function () {
                        vm.$el.querySelectorAll('li')[vm.list.length - 1].querySelector('.content').focus()
                    })
                },
                editItem: function (index) {
                    this.list[index].isEditting = true
                    var vm = this
                    Vue.nextTick(function () {
                        vm.$el.querySelectorAll('li')[index].querySelector('.content').focus()
                    })
                },
                deleteSelectedItems: function () {
                    this.list = this.list.filter(function (item) {
                        return !item.selected
                    })
                },
                deleteAll: function () {
                    this.list = []
                }
            }
        })