[IMWeb训练营作业]vue实现简单的todo list
2017-04-19 21:15
639 查看
运行效果图:
HTML:
JS:
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)
相关文章推荐
- IMweb训练营作业—-Todo List(vue)
- 【IMWeb训练营作业】第一次Vue作业-todo list
- Vue.js 第一发【 todo list (IMWeb训练营作业)】
- 【IMWeb训练营作业】Todo list
- 【IMWeb训练营作业】之todo list 练习总结
- 【IMWeb训练营作业】todo list项目
- 【IMWeb训练营作业】todo list
- 【IMWeb训练营作业】-Todo List
- 【IMWeb训练营作业】To do list
- 【IMWeb训练营作业】todo list
- [IMWeb训练营作业]基于Vuejs的Todo List
- [IMWeb训练营作业]基于Vuejs的Todo List
- IMWeb训练营-VUE-ToDoApp
- vue.js几行实现的简单的todo list
- [IMWeb训练营作业]基于vue实现的select组件
- 【IMWeb训练营作业】vuejs简单任务列表实现
- [IMWeb训练营作业]vue实现自定义select下拉框组件
- IMWeb训练营作业 - vue实现select
- 【IMWeb训练营作业】用Vue做简单的自定义select
- VUE训练营——Todo List