-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathindex.html
78 lines (78 loc) · 2.35 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>云备忘录</title>
<link rel="stylesheet" href="./style/index.css" />
</head>
<body>
<section class="todoapp">
<header class="header">
<h1>云备忘录</h1>
<input class="new-todo" placeholder="接下来要做什么?" autofocus=""
v-model="newTodo"
@keyup.enter="addTodo"
/>
</header>
<section class="main"
v-show="showTodos"
>
<input class="toggle-all" id="toggle-all" type="checkbox"
v-model="allDone"
/>
<label for="toggle-all">一键全部完成</label>
<ul class="todo-list">
<li
v-for="(todo, index) in filteredTodos"
:key="'todo-' + index"
:class="{ completed: todo.completed, editing: todo === editedTodo}"
>
<div class="view">
<input class="toggle" type="checkbox"
v-model="todo.completed"
/>
<label @dblclick="editTodo(todo)" v-cloak>{{ todo.title }}</label>
<button class="destroy"
@click="removeTodo(todo)"
></button>
</div>
<input class="edit"
v-model="todo.title"
v-focus="todo === editedTodo"
@keyup.enter="doneEdit(todo)"
@keyup.esc="cancelEdit(todo)"
@blur="cancelEdit(todo)"
/>
</li>
</ul>
</section>
<footer class="footer"
v-show="showTodos"
>
<span class="todo-count"><strong v-cloak>{{ activeCount }}</strong> 项未完成</span>
<ul class="filters">
<li> <a href="#/"
:class="{ selected: visibility === 'all' }"
@click="visibility='all'"
>全部</a> </li>
<li> <a href="#/active"
:class="{ selected: visibility === 'active' }"
@click="visibility='active'"
>未完成</a> </li>
<li> <a href="#/completed"
:class="{ selected: visibility === 'completed' }"
@click="visibility='completed'"
>已完成</a> </li>
</ul>
<button class="clear-completed"
@click="removeCompleted"
v-show="completedCount"
>清空已完成</button>
</footer>
</section>
<script src="./js/vue.min.js" charset="utf-8"></script>
<script src="./js/store.js" charset="utf-8"></script>
<script src="./js/app.js" charset="utf-8"></script>
<a class="help" href="https://github.com/maxwelldu/vue-todolist#功能描述使用说明" target="_blank">使用帮助</a>
</body>
</html>