使用 Vue 做的一个简易的 todoList，codepen 预览

1
2
3
4
5
6
<div id="todo-list-example">
  <input v-model="newTodoText" @keyup.enter="addNewTodo" placeholder="Add a todo">
  <ol>
    <li is="todo-item" v-for="(todo, index) in todos" :key="index" :title="todo" @remove="todos.splice(index, 1)"></li>
  </ol>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Vue.component("todo-item", {
  template: `<li>{{ title }}<button @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: {
    addNewTodo() {
      if (this.newTodoText.trim() === "") return;
      this.todos.push(this.newTodoText);
      this.newTodoText = "";
    }
  }
});