-
Notifications
You must be signed in to change notification settings - Fork 1
/
vue-list.js
95 lines (91 loc) · 2.04 KB
/
vue-list.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
//设置和获取本地缓存
var listData={
set(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
get(key){
return JSON.parse(localStorage.getItem(key))||[];
}
}
//过滤方法
var filter={
all(list){
return list;
},
unfinished(list){
return list.filter(function(item){
return !item.isChecked
});
},
finished(list){
return list.filter(function(item){
return item.isChecked
});
}
}
var vm=new Vue({
el:'#content_box',
data:{
curdata:'', //当前输入的数据
editing:'',//记录编辑对应的数据
beforeEditing:'',//修改之前的数据
visibility:'all',// 默认选中的分类
list:listData.get('list-v')//获取本地存储
},
watch:{
list:{
handler:function(){
listData.set('list-v',this.list);
},
deep:true
}
},
computed:{
noSelected(){
return this.list.filter(function(item){
return !item.isChecked
}).length
},
filterList(){
return filter[this.visibility]? filter[this.visibility](this.list):this.list;
}
},
methods:{
addList(ev){
this.list.push({'title':ev.target.value,'isChecked':false});
this.curdata="";
},
deleteList(todo){
var index=this.list.indexOf(todo);
this.list.splice(index,1);
},
edtorList(todo){
this.beforeEditing=todo.title;
this.editing=todo;
},
editorEd(){
this.editing=''; //记录的东西数据清空,可以隐藏editing 样式的显示
},
escEditor(todo){
todo.title=this.beforeEditing;
//this.beforeEditing='';
this.editing='';
}
},
directives:{ //自定义指令,需要对纯 DOM 元素进行底层操作,需要调用原生方法的时候,设置自定义指令比较好
'focus':{
update(el,binding){
if(binding.value){ //值为true 时,focus 选中
el.focus();
}
}
}
}
});
function watchHashChange(){
var hash=window.location.hash.slice(1);
vm.visibility=hash;
}
watchHashChange();
//绑定hashchange 事件
window.addEventListener('hashchange',watchHashChange);