| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>任务清单</title>
- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
- <link rel="stylesheet" href="./index.css" />
- </head>
- <body>
- <div id="app">
- <section class="todoapp">
- <header class="header">
- <h1>todos</h1>
- <input
- autofocus="autofocus"
- autocomplete="off"
- placeholder="输入您要完成的任务?"
- class="new-todo"
- />
- </header>
- <section class="main">
- <input id="toggle-all" type="checkbox" class="toggle-all" />
- <label for="toggle-all"></label>
- <ul class="todo-list">
- <li class="todo">
- <div class="view">
- <input type="checkbox" class="toggle" />
- <label>吃饭</label>
- <button class="destroy"></button>
- </div>
- <input type="text" class="edit" />
- </li>
- </ul>
- </section>
- <footer class="footer">
- <span class="todo-count"><strong>0</strong> items left </span>
- <ul class="filters">
- <li><a href="#/all" class="selected">All</a></li>
- <li><a href="#/active" class="">Active</a></li>
- <li><a href="#/completed" class="">Completed</a></li>
- </ul>
- <button class="clear-completed">Clear completed</button>
- </footer>
- </section>
-
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {},
- });
- </script>
- </body>
- </html>
|
