【IMWeb训练营作业】 todolist

最新推荐文章于 2017-04-25 11:48:05 发布

_简单就是美_

最新推荐文章于 2017-04-25 11:48:05 发布

阅读量237

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/han2246/article/details/70254912

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图

js代码

list = [
    {
        title : '吃饭，睡觉，打豆豆',
        isChecked : true
    },
    {
        title : '吃饭，睡觉，打豆豆2',
        isChecked : false
    }
];

var vm = new Vue({
    el:'.main',
    data : {
        list : list,
        todo : '',
        edtorTodos:'',
        beforeTitle:''
    },
    methods : {  
        addTodo(){  //添加
            this.list.push({
                title : this.todo
            })
            this.todo = '';
        },
        delTodo(todo){  //删除
            let index = this.list.indexOf(todo);
            this.list.splice(index,1);
        },
        edtorTodo(todo){ //编辑
            console.log(todo);
            this.beforeTitle = todo.title;
            this.edtorTodos = todo;
        },
        edtorTodoed(todo){  //编辑成功
            this.edtorTodos = '';
        },
        canceTodo(todo){        //取消编辑
            console.log('sad');
            todo.title = this.beforeTitle;
            this.edtorTodos = '';
        }


    },
    directives : {
        "focus": {
            update(ele,binding){
                if(binding.value){
                    ele.focus();
                }
            }
        }
    }
})