您的位置：首页 > 产品设计 > UI/UE

【IMWeb训练营作业】Vue.js便签

2017-04-19 22:41 477 查看

功能说明：

1.回车添加任务

2.勾选完成任务

3.点×删除任务

4.双击标签编辑任务

5.查看未完成任务与已完成任务

源码：
------------------------todos.html-------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todos</title>
<link rel="stylesheet" href="index.css">
<style>

</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div class="page-top">
<div class="page-content">
<h2>任务计划列表</h2>
</div>
</div>
<div class="main">
<h3 class="big-title">添加任务：</h3>
<input type="text" class="task-input" placeholder="例如：吃饭睡觉打豆豆； 提示：+回车即可添加任务" v-on:keyup.enter="addTodo(123,$event)" v-model="todo">
<ul class="task-count">
<li v-show="list.length">{{noCheckedLength}}个任务未完成</li>
<li class="action">
<a href="#">所有任务</a>
<a href="#unfinished" >未完成的任务</a>
<a href="#finished" class="active">完成的任务</a>
</li>
<div class="clear"></div>
</ul>
<h3 class="big-title">任务列表：</h3>
<div class="tasks">
<span class="no-task-tip" 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 class="toggle" type="checkbox" v-model="item.isChecked">
<label @dblclick="editorTodo(item)">{{item.title}}</label>
<button class="destroy" v-on:click="deleteTodo(item)">x</button>
</div>
<input class="edit" v-focus="editorTodos===item" type="text" v-model="item.title" @blur="editorTodoed(item)" @keyup.enter="editorTodoed(item)" @keyup.esc="cancelTodo(item)">
</li>
</ul>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>

-------------index.css-------------

*{
padding:0;
margin:0;
}
.page-top{
position: fixed;
top:0;
left:0;
height: 40px;
background-color: #E8593D;
width:100%;
text-align: center;
}
.page-content{
color: #FFFFFF;
width: 70%;
margin-left: 15%;
line-height: 40px;
text-align: left;
}
.main{
margin-top: 50px;
margin-left: 15%;
width: 70%;
/*height: 800px;*/
padding: 5px;
}
.main .task-input{
margin-top: 10px;
height:40px;
width:100%;
font-size: 20px;
}
.main ul li{
/*list-style-position: inside;*/
list-style-type: none;
margin-top: 10px;
}
.task-count li{
width: 100%;
float: left;
}
.action{
float: right;
}
.completed label{
text-decoration:line-through;
}
.editing label{
display: none;
}
.editing .edit{
display: block;
}
.edit{
display: none;
}
.action .active{
background-color: #ccc;
}
.clear{
clear: both;
}

------------app.js------------------------------

/**
* Created by sotto on 2017-4-17.
*/

//存取localStorage中的数据
var store = {
save(key, value){
localStorage.setItem(key, JSON.stringify(value));
},
fetch(key){
return JSON.parse(localStorage.getItem(key))||[];
}
};

// var list = [
//     {
//         title: "吃饭睡觉打豆豆1",
//         isChecked: false
//     },
//     {
//         title: "吃饭睡觉打豆豆1",
//         isChecked: true
//     },
// ];
var list = store.fetch("miaov");

var vm = new Vue({
el: ".main",
data: {
list: list,
todo: "",
editorTodos: "",//记录正在编辑的数据
beforeTitle:'',

visibility: "all",//通过属性值变化对数据进行筛选
},
watch:{
/*list: function () {//监控list数据，当这个
store.save("miaov",this.list);
}*/
list: {
handler: function () {
store.save("miaov",this.list);
},
deep: true
},

},
computed:{
noCheckedLength: function () {
return this.list.filter(function(item){
return !item.isChecked
}).length
},
filteredList: function () {
// 过滤的三种情况
var filter = {
all: function () {
return list;
},
finished: function () {
return list.filter(function(item){
return item.isChecked;
});
},
unfinished: function () {
return list.filter(function(item){
return !item.isChecked;
});
}
};
return filter[this.visibility]?filter[this.visibility](list):list;
}
},
methods: {
addTodo(data,event) {
//添加任务
//向list中添加一项任务
/*
{
title:
}
*/
// console.log(event);
//事件处理函数中的this指向的是当前的根实例
// if(event.keyCode === 13){
this.list.push({
title: this.todo,
isChecked: false
});
// }
this.todo="";

},
deleteTodo(todo){
var index = this.list.indexOf(todo);
this.list.splice(index,1);
},
editorTodo(todo){//编辑任务
// console.log(todo);
this.beforeTitle = todo.title;
this.editorTodos = todo;
console.log(todo);
console.log(this.editorTodos);
},
editorTodoed(todo){//编辑成功
this.editorTodos='';
},
cancelTodo(todo){//取消编辑
todo.title = this.beforeTitle;
this.editorTodos='';
this.beforeTitle = '';
}
},
directives:{
"focus": {
update(el, binding){
// console.log(el);
// console.log(binding);
if(binding.value){
el.focus();
}
}
}
}
});
function watchHashChange() {
var hash = window.location.hash.slice(1);
console.log(hash);
vm.visibility = hash;
}
watchHashChange();
window.addEventListener("hashchange",watchHashChange);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Vuejs

相关文章推荐

新的分享

章节导航