用vue写todolist

好的，下面是一个简单的 Vue TodoList 示例：

首先，创建一个 TodoList 组件，包含一个输入框和一个待办事项列表：

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: [],
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo) {
        this.todos.push(this.newTodo);
        this.newTodo = '';
      }
    },
  },
};
</script>

在上面的代码中，我们利用 `v-model` 指令将输入框的值和组件的 `newTodo` 数据绑定在一起，利用 `@keyup.enter` 监听键盘回车键，当用户按下回车键时，调用 `addTodo` 方法将新的待办事项添加到 `todos` 数组中。

接下来，我们可以在 `App.vue` 组件中使用 TodoList 组件：

<template>
  <div>
    <h1>TodoList</h1>
    <TodoList />
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue';

export default {
  components: {
    TodoList,
  },
};
</script>

现在我们已经完成了一个简单的 Vue TodoList 示例，可以在输入框中输入待办事项，按下回车键后将其添加到待办事项列表中。