计算属性和深度监控

来源：互联网发布：08 经济危机知乎编辑：程序博客网时间：2024/06/03 20:29

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>todu list</title>
<script src="vue.js"></script>
<style type="text/css">

.editing :first-child{
display:none;

}

.content{
margin: 0 auto;

}
.editing .edit{
display: block;
}

.edit {
display: none;
}

.view{
width: 90%;
border-bottom: 1px solid #000;
padding: 10px;
}

.view button{
float: right;
margin-right: 20px;
clear: right;
}

.main{
margin: 0 auto;

}

ul{
list-style-type: none;
}

.tab li{
float: left;
width: 50%;
}

.clear{
clear:both;
}
</style>
</head>
<body>
<div class="content">
<div>
<div>
<h2>任务计划列表</h2>
</div>
</div>
<div class="main">
<h3>添加任务：</h3>
<input placeholder="请输入任务内容回车" v-on:keyup.enter="addTodo" type="text" v-model="todo" />

<ul class="tab" v-show="list.length">
<li>{{noChklength}}个任务未完成</li>
<li>
<a href="#all">所有任务</a>
<a href="#unfinished">未完成的任务</a>
<a href="#finished">完成的任务</a>
</li>
</ul>

<div class="clear"></div>

<span v-show="!list.length">还没有添加任何任务</span>
<ul class="todo-list" >
<li class="todo" :class="{completed:item.isChecked,editing:item===editorTodos}" 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 type="button" @click="deleteTodo(item)" >删除</button>
</div>
<input type="text"
v-focus="editorTodos===item"
v-model="item.title"
class="edit"
@blur="edtorTodoed(item)"
@keyup.13="edtorTodoed(item)"
@keyup.esc="cancelTodo(item)"
/>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

var store={

save(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
fetch(key){
return JSON.parse(localStorage.getItem(key)) || [];
}
}

var list=store.fetch("list-json");
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 vm=new Vue({
el:".main",
data:{
list:list,
todo:'',
editorTodos:"",
beforeTitle:"",
visibility:"all"
},
watch:{ ////深度监控
list:{
handler:function(){
store.save("list-json",this.list);
},
deep:true
}
},
computed:{//计算属性
noChklength:function () {
return this.list.filter(function(item){
return !item.isChecked;
}).length;
},
filteredList:function(){

return filter[this.visibility]?filter[this.visibility](list):list;
}
},
methods:{
addTodo(ev){ //title:ev.target.value
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.editorTodos=todo;
this.beforeTitle=todo.title;
},
edtorTodoed(todo){
this.editorTodos="";
},
cancelTodo(todo){
todo.title=this.beforeTitle;
this.editorTodos="";
this.beforeTitle="";
}
},
directives:{
"focus":{
update(el,binding){
if(binding.value){
el.focus();
}
}
}
}
});

function watchHashChange(){
var hash=window.location.hash.slice(1);
vm.visibility=hash;
}

window.addEventListener("hashchange",watchHashChange);

0 0