[IMWeb训练营作业]vue实现简单的todo list

来源：互联网发布：apache禁止列目录编辑：程序博客网时间：2024/04/29 08:40

运行效果图：

HTML：

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" href="index.css"></head><body><div class="page-top">    <div class="page-content">        <h2>任务计划列表</h2>    </div></div><div class="main">    <h3 class="big-title">添加任务：</h3>    <input            placeholder=" [IMWeb训练营作业]回车即可添加任务"            class="task-input"            type="text"            v-model="todo"            @keyup.13="addTodo"    />    <ul class="task-count" v-show="list.length">        <li>{{noCheckedLength}}个任务未完成</li>        <li class="action">            <a href="#all" :class={active:undo==1} @click="choose(1)">所有任务</a>            <a href="#unfinished" :class={active:undo==2} @click="choose(2)">未完成的任务</a>            <a href="#finished" :class={active:undo==3} @click="choose(3)">完成的任务</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 == true,editing:item === edtorTodos}"                v-for="item in filteredList">                <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)"></button>                </div>                <input                        v-foucs="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="./vue.js"></script><script src="app.js"></script></body></html>

JS：

var list = [    {        title:"学习",        isChecked:false //状态为false，为不选中  任务未完成    },    {        title:"剁手",        isChecked:true  //状态为true，为选中    任务完成    },    {        title:"运动",        isChecked:false    }];var filter = {                  //定义filter对象    all:function(list){        return list    },    finished:function(list){        return list.filter(function(item){            return item.isChecked;        })    },    unfinished:function(list){        return list.filter(function(item){            return !item.isChecked;        })    }}var vm = new Vue({    el:".main",    data:{        list:list,        todo:'',        edtorTodos:'',        beforeTitle:'',        undo:1, //默认选中1，所有任务,        visibility:"all"    },    computed:{                     //计算属性        noCheckedLength:function(){          return  this.list.filter(function(item){                return !item.isChecked}).length        },        filteredList:function(){            return filter[this.visibility]?filter[this.visibility](list):list;  //注意此处调用        }    },    methods:{        addTodo(ev){            if(this.todo=='') return; //为空返回            this.list.push({                title:this.todo,                isChecked:false            });            this.todo='';        },        deleteTodo(item){            var index = this.list.indexOf(item);            this.list.splice(index,1)        },        edtorTodo(item){            console.log(item);            this.beforeTitle = item.title;            this.edtorTodos=item;        },        edtorTodoed(item){            this.edtorTodos='';        },        cancelTodo(todo){            todo.title = this.beforeTitle;            this.edtorTodos='';        },        choose(num){            this.undo=num;        }    },    directives:{ //directives与methods平级    "foucs":{        update(el,binding){            if(binding.value){                el.focus();            }        }    }}});function watchHashChange(){    var hash = window.location.hash.slice(1);    vm.visibility = hash;}watchHashChange();window.addEventListener("hashchange",watchHashChange)

1 0