计划任务列表 html,任务计划列表 - carolcoral的个人空间 - OSCHINA - 中文开源技术交流社区...

vue指令使用示例

*{padding: 0;margin: 0;font-style: "宋体";}

body{background-color: #f0f0f0;}

.page-top{

width: 100%;

height: 50px;

background-color: #ffc234;

}

.page-content{

line-height: 50px;

text-align: center;

vertical-align: middle;

}

.main{

width: 500px;

height: auto;

margin: 0 auto;

}

.big-title{

display: block;

font-family: "宋体";

width: auto;

height: 45px;

vertical-align: middle;

line-height: 45px;

}

.task-input{

display: block;

width: 100%;

height: 25px;

border-radius: 10px;

line-height: 25px;

vertical-align: middle;

}

.task-count{

display: block;

width: 500px;

height: 27px;

line-height: 27px;

vertical-align: middle;

}

.task-count li:nth-child(1){

float: left;

}

.task-count li:nth-child(2){

text-align: right;

right: 0px;

}

.tasks{

width: 100%;

height: auto;

margin-left: 0px;

}

.no-task-tip{

display: block;

height: 25px;

width: auto;

line-height: 25px;

vertical-align: middle;

}

.action{

display: block;

font-family: "楷体";

width: auto;

height: 25px;

right: 0px;

margin-left: 170px;

right: 0px;

margin-top: 8px;

}

.action a{

display: block;

float: left;

width: 100px;

height: 25px;

text-decoration: none;

background-color: #fcfcfc;

border:1px solid #ffad86;

opacity: 0.8;

border-radius: 10px;

margin-left: 3px;

text-align: center;

vertical-align: middle;

right: 0px;

}

.view{

width: 100%;

height: 30px;

background: #fff;

vertical-align: middle;

line-height: 30px;

opacity: 0.6;

border-radius: 10px;

margin-bottom: 6px;

}

.toggle{

display: inline-block;

width: 30px;

height: 30px;

float: left;

margin-left: 10px;

border-radius: 50%;

}

label{

display: block;

height: 30px;

width: 430px;

line-height: 30px;

vertical-align: middle;

left: 0px;

float: left;

}

.complete{

display: block;

background-color: #8e8e8e;

border-radius: 10px;

}

.completed{

display: block;

/*background:#adadad;*/

text-decoration: line-through;

text-decoration-color: #000;

height: 5px;

}

.destroy{

display: block;

position: absolute;

width: 22px;

height: 22px;

border-radius: 50%;

border:none;

opacity: 1;

margin-top: 4px;

margin-left: 475px;

}

.edit{

display: none;

/*display: block;*/

width: auto;

height: auto;

margin-top: -50px;

}

ul li{

list-style: none;

}

任务计划列表

添加任务：

• {{ noCheckeLength }}个任务未完成

• 所有任务

  未完成的任务

  完成的任务

任务列表：

还没有添加任何任务

• {{ item.title }}

//存取localStorage中数据

var store = {

save(key,value){

localStorage.setItem(key,JSON.stringify(value));

},

fetch(key){

return JSON.parse(localStorage.getItem(key)) || [];

}

};

var list = store.fetch("Learn-Vuejs");

//过滤的时候有三种情况 all finished unfinished

var filter = {

all:function(){

return list;

},

finished:function(){

return list.filter(function(item){

return item.isChecked;

})

},

unfinished:function(){

return !list.isChecked;

}

};

var vm = new Vue({

el:".main",

data:{

list:list,

todo:"",

edtorTodos:"", //记录正在编辑的数据

beforTitle:"", //记录编辑之前的任务的记录

visibility:"all" //通过该属性值的变化对数据进行筛选

},

watch:{

// list:function(){

// //监控list数据属性，当list属性对应的值放生变化执行函数

// store.save("Learn-Vuejs",this.list);

// }

list:{

handler:function(){

store.save("miaov-new-class",this.list);

},

deep:true

}

},

computed:{

noCheckeLength: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){ //添加任务

//向list中添加一项任务

/*

{

title:

}

*/

//事件处理函数中的this指向的是当前根实例

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){

// console.log(todo);

//编辑任务的时候，记录编辑的这条任务的title，方便在取消编辑的时候重新给之前的title

this.beforTitle = todo.title;

this.edtorTodos = todo;

},

edtorTodoed(todo){ //编辑任务完成

edtorTodos = "";

},

cancelTodo(todo){ //取消编辑

//取消当前操作

todo.title = this.beforTitle;

this.beforTitle = "";

//显示div，隐藏input

this.edtorTodos = "";

}

},

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("haschange",watchHashChange);