IMWeb训练营作业------任务计划列表
来源:互联网 发布:毛衣品牌 知乎 编辑:程序博客网 时间:2024/06/05 17:55
先上完成后的效果图
HTML
<!DOCTYPE html><html lang="zh-cmn-Hans"> <meta charset='utf-8'> <title>任务计划列表</title> <link rel="stylesheet" href="style.css"> <script src="vue.js"></script></head><body> <div class="page-top"> <div class="page-content"> <h2>任务计划列表</h2> </div> </div> <div class="main"> <h3 class="big-title">添加任务:</h3> <input placeholder="按回车键即可添加任务" class="task-input" type="text" v-model="todo" v-on:keyup.13="addTodo" /> <ul class="task-count" v-show="list.length"> <li>{{noCheckeLength}}个任务未完成</li> <li class="action"> <a v-bind:class="{active: visibility == 'all'}" href="#all">所有任务</a> <a v-bind:class="{active: visibility == 'unfinished'}" href="#unfinished">未完成的任务</a> <a v-bind:class="{active: visibility == 'finished'}" href="#finished">完成的任务</a> </li> </ul> <h3 class="big-title">任务列表:</h3> <div class="tasks"> <span class="no-task-tip" v-show="!filteredList.length">还没有添加任何任务</span> <ul class="todo-list"> <li class="todo" :class="{completed: item.isChecked,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>
Js
var store = { save(key, value) { localStorage.setItem(key, JSON.stringify(value)); }, fetch(key) { return JSON.parse(localStorage.getItem(key)) || []; } } var filter = { all: function (list) { return list; }, finished: function (list) { return list.filter(function (item) { return item.isChecked; }) }, unfinished: function () { return list.filter(function (item) { return !item.isChecked; }) } } var list = store.fetch("miaov-new-class"); var vm = new Vue({ el: ".main", data: { list: list, todo: "", edtorTodos: '', beforeTitle: '', visibility: "all" }, watch: { list: { handler: function () { store.save("miaov-new-class", this.list); }, deep: true } }, computed: { noCheckeLength: function () { return this.list.filter(function (item) { return !item.isChecked }).length }, filteredList: function () { return filter[this.visibility] ? filter[this.visibility](this.list) : this.list; } }, methods: { addTodo() { this.list.push({ title: this.todo, isChecked: false }); this.todo = ''; }, deleteTodo(todo) { var index = this.list.indexOf(todo); this.list.splice(index, 1); }, edtorTodo(todo) { this.beforeTitle = todo.title; this.edtorTodos = todo; }, edtorTodoed(todo) { this.edtorTodos = ''; }, cancelTodo(todo) { todo.title = this.beforeTitle; this.beforeTitle = ''; this.edtorTodos = ''; } }, directives: { "foucs": { update(el, binding) { if (binding.value) { el.focus(); } } } } }); function watchHashChange() { var hash = window.location.hash.slice(1); vm.visibility = hash||'all'; } window.onload=watchHashChange(); window.addEventListener("hashchange", watchHashChange);
1 0
- IMWeb训练营作业------任务计划列表
- 【IMWeb训练营作业】vuejs简单任务列表实现
- 【IMWeb训练营作业】用Vue做任务列表To do list
- 【IMWeb训练营作业】用Vue做任务列表To do list
- IMWeb训练营作业
- IMweb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- 【IMWeb训练营作业】
- 【IMWeb训练营作业】
- IMWeb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- Java NIO 系列教程
- nodejs async库初试牛刀
- c sharp 菜鸟的学习历程2
- 最简便的window远程linux方法!
- 你必须知道的.NET之特性和属性
- IMWeb训练营作业------任务计划列表
- 数据库事务、事务四个特性以及三大范式
- unit14 linux中设备的访问
- c语言俩个栈实现一个队列
- Java基础知识总结(绝对经典)
- zoj 3940E
- 括号配对问题
- Logstash学习14_Logstash中文乱码问题
- 问题