vue编写Todo List

作为AI语言模型，我可以为您提供思路和代码片段。

思路：

1. 创建一个TodoList组件，其中包含一个输入框和一个待办事项列表。
2. 当用户在输入框中输入信息并按下回车键时，将该信息添加到待办事项列表中。
3. 当用户点击待办事项列表中的某个项目时，将该项目标记为已完成。
4. 可以添加一个按钮，以便用户可以清除已完成的项目。

代码片段：

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add new todo">
    <ul>
      <li v-for="(todo, index) in todos" :key="index" :class="{ completed: todo.completed }" @click="toggleCompletion(todo)">
        {{ todo.title }}
      </li>
    </ul>
    <button @click="clearCompleted">Clear completed</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.todos.push({
          title: this.newTodo.trim(),
          completed: false
        })
        this.newTodo = ''
      }
    },
    toggleCompletion(todo) {
      todo.completed = !todo.completed
    },
    clearCompleted() {
      this.todos = this.todos.filter(todo => !todo.completed)
    }
  }
}
</script>

<style>
.completed {
  text-decoration: line-through;
}
</style>

以上是一个简单的Todo List组件，您可以根据需求进行修改和扩展。