效果图:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Todo Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/normalize/6.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<h3 class="big-title">添加任务</h3>
<input type="text" class="task-input" placeholder="例如:吃饭睡觉打豆豆" v-model="todo" v-on:keyup.enter="addTodo">
<ul class="task-count" v-show="list.length">
<li>{{notCheckedLength}}个任务未完成</li>
<li class="action">
<a href="#all" v-bind:class="{active: visibility == 'all'}">所有</a>
<a href="#unfinished" v-bind:class="{active: visibility == 'unfinished'}">未完成</a>
<a href="#finished" v-bind:class="{active: visibility == 'finished'}">已完成</a>
</li>
</ul>
<h3 class="big-title">任务列表</h3>
<div class="task">
<span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
<ul class="todo-list">
<li class="todo" v-bind:class="{completed: item.isChecked, editing: item === editingTodo}" v-for="item in filteredList">
<div class="view">
<input type="checkbox" class="toggle" v-model="item.isChecked">
<label v-on:dblclick="editTodo(item)">{{item.title}}</label>
<button class="destroy" v-on:click="deleteTodo(item)">x</button>
</div>
<input
type="text"
class="edit"
v-on:blur="editTodoFinished(item)"
v-on:keyup.enter="editTodoFinished(item)"
v-on:keyup.esc="cancelTodo(item)"
v-focus="editingTodo === item"
v-model="item.title"
/>
</li>
</ul>
</div>
</div>
<script src="../lib/vue/vue.js"></script>
<script src="./app.js"></script>
</body>
</html>
var store = {
fetch: function (key) {
return JSON.parse(localStorage.getItem(key)) || [];
},
save: function (key, value) {
localStorage.setItem(key, JSON.stringify(value))
}
}
var 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 list = store.fetch('todolist');
var vm = new Vue({
el: '.main',
data: {
editingTodo: null,
formerTitle: '',
list: list,
todo: '',
visibility: 'all'
},
methods: {
addTodo: function (e) { // 添加任务
this.list.push({
title: this.todo,
isChecked: false
});
this.todo = '';
},
deleteTodo: function (todo) {
var index = this.list.indexOf(todo);
this.list.splice(index, 1);
},
editTodo: function (todo) {
this.formerTitle = todo.title;
this.editingTodo = todo;
},
editTodoFinished: function (todo) {
this.editingTodo = null;
this.formerTitle = '';
},
cancelTodo: function (todo) {
todo.title = this.formerTitle;
this.editingTodo = null;
this.formerTitle = '';
}
},
computed: {
notCheckedLength: function () {
return this.list.filter(function (item) {
return !item.isChecked
}).length
},
filteredList: function () {
return filter[this.visibility] ? filter[this.visibility](list) : list;
}
},
directives: {
focus: {
update: function (el, binding) {
if (binding.value == true) {
el.focus();
}
}
}
},
watch: {
list: {
handler: function (list) {
store.save('todolist', list)
},
deep: true
}
}
});
function watchHashChange () {
var hash = window.location.hash.slice(1);
vm.visibility = hash || 'all';
}
watchHashChange();
window.addEventListener('hashchange', watchHashChange);