|
|
@ -4,25 +4,7 @@ |
|
|
<meta charset="utf-8"> |
|
|
<meta charset="utf-8"> |
|
|
<title>Vue.js • TodoMVC</title> |
|
|
<title>Vue.js • TodoMVC</title> |
|
|
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css"> |
|
|
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css"> |
|
|
<style> |
|
|
<style>[v-cloak] { display: none; }</style> |
|
|
[v-cloak] { |
|
|
|
|
|
display: none; |
|
|
|
|
|
} |
|
|
|
|
|
.todo-list { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
} |
|
|
|
|
|
.todo { |
|
|
|
|
|
height: 60px; |
|
|
|
|
|
} |
|
|
|
|
|
.todo-move, .todo-enter-active, .todo-leave-active { |
|
|
|
|
|
transition: all .25s cubic-bezier(.5,0,.1,1); |
|
|
|
|
|
} |
|
|
|
|
|
.todo-enter, .todo-leave-active { |
|
|
|
|
|
opacity: 0; |
|
|
|
|
|
height: 0; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |
|
|
|
|
|
</head> |
|
|
</head> |
|
|
<body> |
|
|
<body> |
|
|
<section class="todoapp"> |
|
|
<section class="todoapp"> |
|
|
@ -36,7 +18,7 @@ |
|
|
</header> |
|
|
</header> |
|
|
<section class="main" v-show="todos.length" v-cloak> |
|
|
<section class="main" v-show="todos.length" v-cloak> |
|
|
<input class="toggle-all" type="checkbox" v-model="allDone"> |
|
|
<input class="toggle-all" type="checkbox" v-model="allDone"> |
|
|
<ul class="todo-list" is="transition-group" name="todo"> |
|
|
<ul class="todo-list"> |
|
|
<li v-for="todo in filteredTodos" |
|
|
<li v-for="todo in filteredTodos" |
|
|
class="todo" |
|
|
class="todo" |
|
|
:key="todo.id" |
|
|
:key="todo.id" |
|
|
|
Evan You
8 years ago