【IMWeb训练营作业】

最新推荐文章于 2017-04-22 13:02:12 发布

Manecho

最新推荐文章于 2017-04-22 13:02:12 发布

阅读量226

点赞数 3

分类专栏： vue

本文链接：https://blog.csdn.net/qq_34769244/article/details/70254194

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一次用写博客的方式提交作业，操作有点不熟练，代码的运行效果赶脚跟其他同学的不太一样啊

demo视图：

运行效果：

todos.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <link rel="stylesheet" href="index.css">  
    <script src="./vue.js"></script>  
</head>  
<body>  
    <div class="page-top">  
        <div class="page-content">  
            <h2>Todo List</h2>  
        </div>  
    </div>  
    <div class="main">  
        <h3 class="big-title">添加：</h3>  
        <input   
            placeholder="例如：吃饭睡觉打奥特曼  回车即可添加任务"   
            class="task-input"   
            type="text"  
            v-model="todo"  
            v-on:keyup.enter="addTodo"  
        />  
        <ul class="task-count" v-show="list.length">  
            <li>  
            {{   
                noCheckLength  
            }}  
            个任务未完成  
            </li>  
            <li class="action">  
                <a class="active" href="#">所有任务</a>  
                <a href="#">未完成的任务</a>  
                <a href="#">完成的任务</a>  
            </li>  
        </ul>  
        <h3 class="big-title">任务列表：</h3>  
        <div class="tasks">  
  
            <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>  
            <ul class="todo-list">  
                <li class="todo" :class="{completed:item.isChecked,editing:item === edtorTodos}" v-for="item in list">  
                    <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,$event)"></button>  
                    </div>  
                    <input   
                    v-focus="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>  
    <script src="./app.js"></script>  
</body>  
</html>

app.js

var list = [  
    {  

        title:"签到",  
        isChecked:false  
    },  
    {  
        title:"背单词",  
        isChecked:true  
    },  
    {  
        title:"上课",  
        isChecked:false  
    },  
    {  
        title:"学习vue.js",  
        isChecked:true  
    }  
];  
  


new Vue({  
    el:".main",  
    data:{  
        list:list,  
        todo:"",  
        edtorTodos:"", //记录正在编辑的todo  
        beforeTitle:""   
    },  
    computed:{  
        noCheckLength:function(){  
            return this.list.filter(function(item){  
                return !item.isChecked  
            }).length  
        }  
    },  
    methods:{//所有的事件处理函数  
        addTodo(ev){//添加任务 es6  
            this.list.push({  
                title : this.todo,  
                isChecked:false  
            })  
            this.todo = '';  
        },  
        deleteTodo(todo,ev){  
            var 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 = '';  
        },  
        cancelTodo(todo){  
            console.log(123)  
            todo.title = this.beforeTitle;  
            this.beforeTitle = "";  
            this.edtorTodos = ""  
        }  
    },  

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