时间有点紧，样式没时间调了，功能都完善了，先放上来，回头把样式调好
调试好的效果图
html
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"utf-8"
>
<
title
>任务计划表
</
title
>
<
style
>
body {
margin:
0;
font-family: Microsoft Yahei;
background:
#f5f8fb;
}
</
style
>
<
link
rel=
"stylesheet"
href=
"style.css"
>
<
script
src=
"vue.js"
></
script
>
</
head
>
<
body
>
<
div
class=
"app"
>
<
h3
class=
"bit-title"
>添加任务：
</
h3
>
<
input
placeholder=
"提示回车可添加任务"
class=
"task-input"
type=
"text"
v-model=
"todo"
v-on:keyup.
enter=
"addTodo"
/>
<
ul
class=
"task-count"
v-show=
"list.length"
>
<
li
>{{noCheckedLength}}任务未完成
</
li
>
<
li
class=
"action"
>
<
a
class=
"active"
href=
"#all"
>所有任务
</
a
>
<
a
href=
"#unfinshed"
>未完成的任务
</
a
>
<
a
href=
"#finshed"
>完成的任务
</
a
>
</
li
>
</
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===edtorTodos}"
v-for=
"item in filteredList"
>
<
div
class=
"view"
>
<
input
class=
"toggle"
type=
"checkbox"
v-model=
"item.isChecked"
/>
<
label @
dbclick=
"edtorTodo(item)"
>{{item.title}}
</
label
>
<
button
class=
"destroy" @
click=
"deleteTodo(item)"
></
button
>
</
div
>
<
input
v-focus=
"edtorTodos=== item"
class=
"edit"
type=
"text"
v-model=
"item.title" @
blur=
"edtorTodoed(item)" @
keyup.
enter=
"edtorTodoed(item)" @
keyup.
esc=
"cancelTodo(item)"
/>
</
li
>
</
ul
>
</
div
>
<
script
src=
"/app.js"
></
script
>
</
body
>
</
html
>
app.js
var
store = {
save(
key,
value) {
localStorage.
setItem(
key,
JSON.
stringify(
value))
},
fetch(
key) {
return
JSON.
parse(
localStorage.
getItem(
key)) || [];
}
}
var
filter = {
all:
function (
list) {
return
list;
},
unfinshed:
function (
list) {
return
list.
filter(
function (
item) {
return !
item.
isChecked;
})
},
finshed:
function (
list) {
return
list.
filter(
function (
item) {
return
item.
isChecked;
})
}
}
//var list = [ ];
var
list =
store.
fetch(
'todoList');
var
vm =
new
Vue({
el:
".app",
data: {
list:
list,
todo:
"",
edtorTodos:
"",
//记录正在编辑的todo
beforeTitle:
"",
visibility:
"all",
},
watch: {
list: {
handler:
function () {
store.
save(
'todoList',
this.
list);
},
deep:
true
}
},
computed: {
noCheckedLength:
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) {
//添加任务 es6
this.
list.
push({
title:
this.
todo,
isChecked:
false
})
this.
todo =
'';
},
deleteTodo(
todo,
ev) {
var
index =
this.
list.
indexOf(
todo);
this.
list.
splice(
index,
1);
},
edtorTodo(
todo) {
console.
log(
todo);
this.
beforeTitle =
todo.
title;
this.
edtorTodos =
todo;
},
edtorTodoed(
todo) {
this.
edtorTodos =
'';
},
cancelTodo(
todo) {
console.
log(
123)
todo.
title =
this.
beforeTitle;
this.
beforeTitle =
"";
this.
edtorTodos =
""
}
},
directives: {
"focus"
: {
update(
el,
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)
530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
