vue todolist完整案例

以下是一个简单的 Vue.js Todo List 的完整案例：

HTML 代码：

<div id="app">
  <h1>My Todo List</h1>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Add a new todo" v-model="newTodo" @keyup.enter="addTodo">
    <button class="btn btn-primary" @click="addTodo">Add</button>
  </div>
  <ul class="list-group">
    <li class="list-group-item" v-for="todo in todos">
      <span>{{ todo }}</span>
      <button class="btn btn-danger btn-sm float-right" @click="deleteTodo(todo)">Delete</button>
    </li>
  </ul>
</div>

Vue.js 代码：

new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: []
  },
  methods: {
    addTodo: function() {
      if (this.newTodo.trim() == '') {
        return;
      }
      this.todos.push(this.newTodo);
      this.newTodo = '';
    },
    deleteTodo: function(todo) {
      var index = this.todos.indexOf(todo);
      this.todos.splice(index, 1);
    }
  }
})

这个案例中，我们创建了一个 Vue 实例，并定义了数据 `newTodo` 和 `todos`，以及两个方法 `addTodo` 和 `deleteTodo`。在 HTML 中，我们绑定了 `newTodo` 和 `todos` 到输入框和列表，并使用 `v-for` 指令循环渲染每一个 todo。同时，我们通过 `@keyup.enter` 和 `@click` 监听用户的输入和点击事件，并调用相应的方法来添加和删除 todo。