html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>任务计划列表</title>
<link rel="stylesheet" href="./css.css">
<script src="./vue.js"></script>
<script src="./app.js"></script>
</head>
<body>
<h3 class="title">任务计划列表</h3>
<div id="main">
<h4 >添加任务:</h4>
<input type="text" placeholder="提示：回车即可添加任务" class="task-input" v-model="todo" v-on:keyup.enter="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="list">任务列表：</h3>
<div class="tasks">
<span class="no-task-tip" v-show="!filterdList.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 type="checkbox" class="toggle" v-model="item.isChecked" />
<label @dblclick="edtorTodo(item)">{{item.title}}</label>
<button class="destroy" @click="deleteTodo(item)"></button>
</div>
<input
type="text"
class="edit"
v-model="item.title"
v-focus="edtorTodos===item"
@blur="edtorTodoed(item)"
@keyup.13="edtorTodoed(item)"
@keyup.esc="cancelTodo(item)"
/>
</li>
</ul>
</div>
</div>
</body>
</html>
js:
//本地存取localStorage中数据
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);