【IMWeb训练营作业】vuejs简单任务列表实现
主要包括如下内容:
- 任务内容
- 核心代码
- 演示效果
任务内容
- 增删便签任务
- 编辑便签任务
- watch深度监控数据
- 利用hash过滤数据
核心代码
- vm代码如下所示
var store = {
save(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
fetch(key){
return JSON.parse(localStorage.getItem(key)) || [];
}
}
var list = store.fetch("todolist");
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:"",
beforeContent:"",
visibility:"all" //all finished unfinished
},
watch:{
/*list:function(){
store.save("todolist",this.list);
}*/
list:{
handler:function(){
store.save("todolist",this.list);
},
deep:true
}
},
methods:{
addTodo(event){
this.list.push({
content:this.todo,
isChecked:false
});
this.todo = "";
},
removeTodo(todo){
var index = this.list.indexOf(todo);
this.list.splice(index,1);
},
editorTodo(todo){
this.beforeContent = todo.content;
this.editortodos = todo;
},
editorTodoend(todo){
this.editortodos = "";
},
cancelTodo(todo){
todo.content = this.beforeContent;
this.editortodos = "";
}
},
directives:{
"foucs":{
update(el,binding){
if (binding.value) {
el.focus();
}
}
}
},
computed:{
noCheckLength:function(){
return this.list.filter(function(item){
return !item.isChecked
}).length;
},
filterList:function(){
return filter[this.visibility]?filter[this.visibility](list):list;
}
}
});
function watchHashChange(){
var hash = window.location.hash.slice(1);
vm.visibility = hash;
}
watchHashChange();
window.addEventListener("hashchange",watchHashChange);
- html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宁土文vue任务计划</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" type="text/css" href="./lib/bootstrap/3.3.0/css/bootstrap.css"/>
</head>
<body >
<div class="main container">
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#all">宁土文任务计划列表</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#all">所有任务</a></li>
<li ><a href="#unfinished">未完成任务</a></li>
<li><a href="#finished">已完成任务</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="row">
<span>添加任务:</span>
</div>
<div class="row">
<input @keyup.enter="addTodo"
v-model="todo" placeholder="提示:按回车添加" class="form-control" />
</div>
<br/>
<br />
<div class="row mt50">
<span>任务列表:</span>
<span v-show="list.length"> {{noCheckLength}}个未完成任务</span>
</div>
<div class="row">
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center" width="15%">完成</th>
<th width="70%">任务</th>
<th class="text-center" width="15%">删除</th>
</tr>
</thead>
<tbody>
<tr :class="{ completed:item.isChecked,editing:item === editortodos}" v-for="item in filterList">
<td class="text-center">
<input type="checkbox" name="" v-model="item.isChecked">
</td>
<td>
<label v-if="editortodos !== item" v-on:dblclick="editorTodo(item)">{{ item.content }}</label>
<input v-if="editortodos === item"
type="text"
class="form-control"
name=""
v-model="item.content"
v-foucs="editortodos === item"
@blur="editorTodoend(item)"
@keyup.enter = "editorTodoend(item)"
@keyup.esc = "cancelTodo(item)"
/>
</td>
<td class="text-center">
<button class="btn btn-primary" @click="removeTodo(item)">删除</button>
</td>
</tr>
<tr v-if="!list.length">
<td colspan="3">
<span v-show="!list.length">还未添加任何任务</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="./lib/jquery/1.11/jquery.js"></script>
<script type="text/javascript" src="./lib/bootstrap/3.3.0/js/bootstrap.js"></script>
<script type="text/javascript" src="./lib/vue/2.2.6/vue.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
演示效果
PC端效果
手机端效果
网上演示url