基于Vue组件实现TodoList

基于Vue组件实现TodoList

引用

CSDN

1.

https://blog.csdn.net/qq_52764447/article/details/121685792

本文将详细介绍如何使用Vue组件实现一个功能完整的TodoList应用。通过本教程，你将学习到Vue组件的创建、数据传递、事件处理等核心概念，并掌握如何构建一个实用的待办事项列表应用。

功能概述

• 将已有的任务渲染到页面
• 在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加）
• 动态计算有几个已完成的任务以及所有的任务
• 点击复选框，实现选中或不选中效果（即完成或未完成）
• 删除单个任务以及删除已完成任务

下面这个图展示了组件的结构：

功能实现

功能一：将已有的任务渲染到页面

数据存储在父组件App中，通过v-for指令将数据渲染到页面。

UserList组件

<template>
  <ul class="todo-main">
      <UserItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" >
  </ul>
</template>
<script>
import UserItem from "./UserItem.vue";
export default {
  name: "UserList",
  components: { UserItem },
  props: ["todos", "checktodo", "deletetodo"],
};
</script>

UserItem组件

<template>
  <li>
    <label>
      <input
        type="checkbox"
        :checked="todo.done"
      />
      <span>{{ todo.title }}</span>
    </label>
    <button class="btn btn-danger"">删除</button>
  </li>
</template>
<script>
export default {
  name: "UserItem",
  props: ["todo"]
};
</script>

功能二：在输入框中输入内容后按enter键添加任务

在UserHeader组件中为表单绑定回车事件，通过props实现子组件向父组件传递数据。

UserHeader组件

<input
      type="text"
      placeholder="请输入你的任务名称，按回车键确认"
      @keyup.enter="add"
      v-model="title"
    />

App组件

<UserHeader :addtodo="addtodo" />
methods: {
    addtodo(todoObj) {
      this.todos.unshift(todoObj);
    }
}

UserHeader子组件

props: ["addtodo"],
methods: {
    add() {
      if (!this.title.trim()) {
        alert("数据不能为空");
      }
      const todoObj = { id: nanoid(), title: this.title, done: false };
      this.addtodo(todoObj);
      this.title = " ";
    }
}

功能三：动态计算任务状态

在UserFooter组件中通过计算属性计算已完成和总任务数。

计算方法

computed: {
    doneTotal() {
      return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0);
    },
    total() {
      return this.todos.length;
    }
}

功能四：任务完成状态切换

通过双向绑定实现复选框的选中状态切换。

UserItem组件

<script>
export default {
  name: "UserItem",
  props: ["todo", "checktodo"],
  methods: {
    handlechack(id) {
      this.checktodo(id);
    }
  }
}
</script>

App组件

methods: {
    checktodo(id) {
      this.todos.forEach((todo) => {
        if (todo.id === id) {
          todo.done = !todo.done;
        }
      });
    }
}

功能五：任务删除

支持删除单个任务和删除所有已完成任务。

App组件

methods: {
    deletetodo(id) {
      this.todos = this.todos.filter((todo) => todo.id !== id);
    },
    clearAlltodo() {
      this.todos = this.todos.filter((todo) => !todo.done);
    }
}

UserItem组件

<template>
    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
</template>
<script>
export default {
  name: "UserItem",
  props: ["deletetodo"],
  methods: {
    handleDelete(id) {
      if (confirm("确定删除吗？ ")) {
        this.deletetodo(id);
      }
    }
  }
}
</script>

总结

以上就是基于Vue组件实现的一个TodoList案例。虽然代码不完全展示，但每个功能都进行了详细的分析，相信读者能够根据这些内容构建出一个完整的TodoList应用。