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 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.value {
width: 500px;
height: 50px;
}
span {
display: inline-block;
width: 300px;
height: 50px;
border: 1px solid black;
line-height: 50px;
text-align: center;
}
.rad {
width: 50px;
height: 50px;
}
.color {
color: #ccc;
background: #f1f1f1;
font-weight: 700;
font-size: 20px;
}
</style>
</head>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<body>
<div id="app">
<h2>添加任务</h2>
<input type="text" name="" v-foucs class="value" @keyup.13="add" v-model="val">
<div>
<span v-show="list.length">{{noCheckLength}}个任务未完成</span>
<span v-show="!list.length">没有任务</span>
<a @click="url" href="#active"><span>所有任务</span></a>
<a @click="url" href="#unfinishi"><span>未完成的任务</span></a>
<a @click="url" href="#finished"><span>完成的任务</span></a>
<ul>
<li v-for="item,index in filteredList">
<input type="checkbox" name="" v-model="item.isCheckbox">
<i :class="{color:item.isCheckbox}">{{item.title}}</i>
<span @click="del(index)">删除</span>
</li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//利用hash过滤数据
//封装localStorage中的数据
var store = {
save(key, value) {
localStorage.setItem(key, JSON.stringify(value));
},
fetch(key) {
return JSON.parse(localStorage.getItem(key)) || [];
}
}
var list = store.fetch("aaa");
console.log(list);
//创建对象
/* var list = [{
title: "打豆豆",
isCheckbox: false
},
{
title: "打豆豆",
isCheckbox: true
}
];*/
var vm = new Vue({
el: "#app",
data: {
list: list,
val: "",
visibility:"all" //通过该属性值得变化进行筛选
},
methods: {
add(ev) {
console.log(ev);
if (ev.keyCode === 13) {
this.list.push({
title: this.val
})
};
this.val = '';
},
del(index) {
console.log(index);
this.list.splice(index, 1)
},
url(){
var hash = window.location.hash.slice(1);
this.visibility = hash;
console.log(hash);
}
},
watch: {
/*list(){
store.save('aaa',this.list);
}*/
//深度监控 可以监控到细微的变化
/* */
list:{
handler() {
store.save('aaa', this.list);
},
deep: true
}
},
computed:{
noCheckLength:function(){
return this.list.filter(function(item){
return !item.isCheckbox;
}).length
},
filteredList:function(){
var hash = window.location.hash.slice(1);
this.visibility = hash;
//过滤时候的三种情况
var filter = {
all(){
return list;
},
finished(){
return list.filter(function(item){
return item.isCheckbox;
})
},
unfinishi(){
return list.filter(function(item){
return !item.isCheckbox;
})
}
}
console.log(this.visibility);
return filter[this.visibility] ? filter[this.visibility](list):list;
}
},
directives:{
foucs:{
update(el,binding){
if(binding.value){
el.focus();
}
}
}
}
})
function watchHashChange(){
var hash = window.location.hash.slice(1);
vm.visibility = hash;
}
watchHashChange();
window.addEventListener("hashchange",function(){
var hash = window.location.hash;
})
/*
方法一
add(ev){
if (ev.keyCode === 13) {
this.list.push({
title:ev.target.value
})
};
注意:
vue中没有实参有形参 那么那个参数就是event对象
event对象也可以通过传入$event去获取
del(todo){
var index = this.list.indexOf(todo);
this.splice(index,1);
}
这里面所实现的push等功能,只是在外表上改写了,不是原生的方法
*/
</script> |
共 0 条评论关于"利用Hash过滤数据"
最新评论