[ADD]todo list

2020-10-09 17:39:19 +08:00 · 2020-10-09 17:39:19 +08:00 · c914434727
parent 61523c08ca
commit c914434727
1 changed files with 62 additions and 0 deletions
--- a/todo_list.html
+++ b/todo_list.html
@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title></title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="">
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  </head>
+  <body>
+    <!--[if lt IE 7]>
+      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
+    <![endif]-->
+    <div id="todo-list-example">
+      <input type="text" v-model="newTodoText" v-on:keyup.enter="addNewTodos" placeholder="Add a todo">
+      <ul>
+        <li
+          is="todo-item"
+          v-for="(todo, index) in todos"
+          v-bind:title="todo"
+          v-on:remove="todos.splice(index, 1)"
+        ></li>
+      </ul>
+    </div>
+   
+    <script>
+    Vue.component('todo-item', {
+      template: '\
+        <li>\
+          {{ title }}\
+          <button v-on:click="$emit(\'remove\')">X</button>\
+        </li>\
+      ',
+      props: ['title']
+    })
+    new Vue({
+      el: '#todo-list-example',
+      data: {
+        newTodoText: '',
+        todos: [
+          'Do the dishes',
+          'Take out the trash',
+          'Mow the lawn'
+        ]
+      },
+      methods: {
+        addNewTodos: function(){
+          this.todos.push(this.newTodoText)
+          this.newTodoText = ''
+        }
+      },
+    })
+
+    </script>
+  </body>
+</html>