vue todolist完整案例

对于一个Todolist的完整案例，可以包含以下功能：

1. 添加任务：用户可以通过输入框添加新的任务，任务可以包含标题和描述。
2. 删除任务：用户可以点击任务右侧的删除按钮，删除当前任务。
3. 标记任务完成：用户可以点击任务左侧的复选框，标记当前任务为已完成。
4. 修改任务：用户可以双击任务标题或描述，进入编辑状态，修改任务的标题和描述。
5. 过滤任务：用户可以根据任务状态（全部、已完成、未完成）过滤任务。
6. 存储任务：用户可以将添加的任务保存到浏览器本地存储中，以便下次打开页面时可以恢复之前的任务。

下面是一个使用Vue.js实现的Todolist完整案例的代码。

HTML代码：

<div id="app">
  <h1>Todolist</h1>
  <div>
    <input type="text" v-model="newTask" placeholder="添加任务">
    <button @click="addTask">添加</button>
  </div>
  <div>
    <button @click="changeFilter('all')">全部</button>
    <button @click="changeFilter('completed')">已完成</button>
    <button @click="changeFilter('uncompleted')">未完成</button>
  </div>
  <ul>
    <li v-for="(task, index) in filteredTasks" :key="index">
      <input type="checkbox" v-model="task.completed" @change="updateTask(index)">
      <span v-show="!task.editing" @dblclick="editTask(index)">{{ task.title }}</span>
      <input type="text" v-show="task.editing" v-model="task.title" @blur="updateTaskTitle(index)">
      <button @click="deleteTask(index)">删除</button>
    </li>
  </ul>
</div>

Vue.js代码：

new Vue({
  el: '#app',
  data: {
    tasks: [],
    newTask: '',
    filter: 'all'
  },
  methods: {
    addTask: function() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({
          title: this.newTask,
          completed: false,
          editing: false
        });
        this.newTask = '';
        this.saveTasks();
      }
    },
    deleteTask: function(index) {
      this.tasks.splice(index, 1);
      this.saveTasks();
    },
    updateTask: function(index) {
      this.tasks[index].editing = false;
      this.saveTasks();
    },
    editTask: function(index) {
      this.tasks[index].editing = true;
    },
    updateTaskTitle: function(index) {
      this.tasks[index].editing = false;
      this.saveTasks();
    },
    changeFilter: function(filter) {
      this.filter = filter;
    },
    saveTasks: function() {
      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    },
    loadTasks: function() {
      var tasks = localStorage.getItem('tasks');
      if (tasks !== null) {
        this.tasks = JSON.parse(tasks);
      }
    }
  },
  computed: {
    filteredTasks: function() {
      if (this.filter === 'completed') {
        return this.tasks.filter(function(task) {
          return task.completed;
        });
      } else if (this.filter === 'uncompleted') {
        return this.tasks.filter(function(task) {
          return !task.completed;
        });
      } else {
        return this.tasks;
      }
    }
  },
  mounted: function() {
    this.loadTasks();
  }
});