Vue.js To-Do App 示例

这是一个简单的 Vue.js To-Do 应用程序示例，它展示了如何使用 Vue.js 创建一个动态的用户界面来管理待办事项。

功能列表

添加待办事项
标记待办事项为已完成
删除待办事项

如何使用

在文本框中输入待办事项内容。
点击 "添加" 按钮。
查看待办事项列表，并执行相应的操作。

代码示例

以下是该 To-Do 应用程序的核心代码示例：

<template>
  <div id="app">
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加待办事项">
    <button @click="addTodo">添加</button>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo.text }}
        <button @click="removeTodo(index)">删除</button>
        <button @click="toggleTodo(index)">完成</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ text: this.newTodo });
      this.newTodo = '';
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    },
    toggleTodo(index) {
      this.todos[index].completed = !this.todos[index].completed;
    }
  }
}
</script>

扩展阅读

想要了解更多关于 Vue.js 的知识？请访问我们的 Vue.js 教程。