用vue帮我写一个todolist

很棒！以下是一个简单的todolist示例，使用Vue.js和localStorage来保存任务列表。

HTML代码：

<div id="app">
  <h1>Todo List</h1>
  <form @submit.prevent="addTask">
    <input type="text" v-model="newTask" placeholder="Add a task">
    <button>Add</button>
  </form>
  <ul>
    <li v-for="(task, index) in tasks" :key="index">
      <input type="checkbox" v-model="task.completed" @change="saveTasks">
      <span :class="{ completed: task.completed }">{{ task.text }}</span>
      <button @click="deleteTask(index)">Delete</button>
    </li>
  </ul>
</div>

Vue.js代码：

new Vue({
  el: '#app',
  data: {
    newTask: '',
    tasks: JSON.parse(localStorage.getItem('tasks')) || []
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push({
          text: this.newTask,
          completed: false
        });
        this.newTask = '';
        this.saveTasks();
      }
    },
    deleteTask(index) {
      this.tasks.splice(index, 1);
      this.saveTasks();
    },
    saveTasks() {
      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }
  }
});

CSS代码：

.completed {
  text-decoration: line-through;
}

在这个示例中，每当一个任务被添加、删除或标记为已完成时，我们都会调用 `saveTasks` 方法来保存任务列表到 localStorage 中。我们也可以在页面刷新后恢复列表，因为我们在 Vue.js 的 `data` 选项中使用了从 localStorage 中解析的数据。

如果需要更多的功能，可以根据需要自行扩展该示例。