交互体验满分的Vue3.0版待办清单，你不可错过！

前端

2024-01-29 19:12:38

Vue3.0版待办清单

Vue3.0是一个功能强大且易于使用的JavaScript框架，非常适合构建交互性强的Web应用程序。它可以帮助您轻松创建具有丰富交互功能的待办清单。

功能列表

待办清单通常包含以下功能：

列出待办事项
添加待办事项
编辑待办事项
删除待办事项
切换待办事项的完成状态

添加待办事项

要添加待办事项，只需在输入框中输入待办事项的名称，然后按回车键即可。待办事项将被添加到待办事项列表中。

编辑待办事项

要编辑待办事项，只需双击该待办事项即可。待办事项将进入编辑状态，您可以修改待办事项的名称。修改完成后，按回车键即可提交编辑。

删除待办事项

要删除待办事项，只需点击待办事项右侧的删除按钮即可。待办事项将被从待办事项列表中删除。

切换待办事项的完成状态

要切换待办事项的完成状态，只需点击待办事项左侧的复选框即可。待办事项的完成状态将被切换。

代码示例

<template>
  <div>
    <input type="text" placeholder="添加待办事项" v-model="newTodo">
    <button @click="addTodo">添加</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed">
        <span v-if="todo.editing">{{ todo.title }}</span>
        <input type="text" v-model="todo.title" v-if="todo.editing" @keydown.esc="cancelEdit(todo)" @keydown.enter="doneEdit(todo)">
        <button @click="deleteTodo(todo)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      this.todos.push({
        id: Date.now(),
        title: this.newTodo,
        completed: false,
        editing: false
      })
      this.newTodo = ''
    },
    deleteTodo(todo) {
      this.todos = this.todos.filter(t => t.id !== todo.id)
    },
    editTodo(todo) {
      todo.editing = true
    },
    cancelEdit(todo) {
      todo.editing = false
    },
    doneEdit(todo) {
      todo.editing = false
    }
  }
}
</script>