-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
101 lines (98 loc) · 2.25 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
// var list = [{
// title: '吃饭',
// checked: true
// }, {
// title: 'sleep',
// checked: false
// }]
//处理localStorage
var setLocal = {
save(key, value) {
localStorage.setItem(key, JSON.stringify(value))
},
get(key) {
return JSON.parse(localStorage.getItem(key));
}
}
var filterChecked = {
all(list) {
return list;
},
finish(list) {
return list.filter(function (item) {
return item.checked
})
},
unfinish(list) {
return list.filter(function (item) {
return !item.checked
})
}
}
var list = setLocal.get('todo') || [];
vm = new Vue({
el: '.main',
watch: {
list: {
deep: true,
handler: function () {
setLocal.save('todo', this.list)
}
}
},
data: {
list: list,
inputValue: '',
editingTodo: '',
beforeEditing: '',
visibility: 'all'
},
computed: {
filterList() {
return this.list.filter(function (item) { return !item.checked }).length
},
filterCheck() {
return filterChecked[this.visibility] ? filterChecked[this.visibility](this.list) : this.list
}
},
methods: {
addTodo() {
this.list.push({
title: this.inputValue,
checked: false
})
this.inputValue = ''
},
deleteTodo(todo) {
var index = this.list.indexOf(todo);
this.list.splice(index, 1)
},
editTodo(todo) {
this.editingTodo = todo;
this.beforeEditing = todo.title
},
editedTodo() {
this.editingTodo = '';
},
cancleEdit(todo) {
todo.title = this.beforeEditing;
this.beforeEditing = '';
this.editingTodo = ''
}
},
directives: {
focus: {
update(el, binding) {
if (binding.value) {
el.focus()
}
}
}
}
})
function hashchange() {
var hash = window.location.hash.slice(1);
vm.visibility = hash;
}
hashchange();
window.addEventListener('hashchange', hashchange)