vue todolist完整案例

以下是一个完整的Vue.js TodoList应用程序示例：

HTML模板

<div id="app">
  <h1>Todo List</h1>
  <form @submit.prevent="addTask">
    <input type="text" v-model="newTask" placeholder="Add new task">
    <button>Add</button>
  </form>
  <ul>
    <li v-for="(task, index) in tasks" :key="index">
      <span>{{ task }}</span>
      <button @click="removeTask(index)">Remove</button>
    </li>
  </ul>
</div>

Vue实例

new Vue({
  el: '#app',
  data: {
    newTask: '',
    tasks: []
  },
  methods: {
    addTask: function() {
      if (this.newTask.length > 0) {
        this.tasks.push(this.newTask);
        this.newTask = '';
      }
    },
    removeTask: function(index) {
      this.tasks.splice(index, 1);
    }
  }
});

在这个示例中，我们使用Vue.js来实现一个简单的TodoList应用程序。我们使用v-model指令来绑定输入字段的值，使用v-for指令来遍历任务数组并显示每个任务。我们还使用了@submit和@click监听器来处理表单提交和按钮点击事件。

在addTask方法中，我们检查输入字段是否有内容，如果有，则将其添加到任务数组中，并清除输入字段。在removeTask方法中，我们使用splice方法从任务数组中删除指定的任务。

这个示例只是一个简单的起点，你可以将其扩展为更复杂的TodoList应用程序，例如添加日期、过期日期、任务状态等。