VUE3初学者的进阶实战——TODO清单动态切换状态

前端

2023-10-15 00:28:26

引言

昨天的博文已介绍了如何使用VUE3编辑待办事项。今天，我们将继续深入学习，实现待办事项状态的动态切换，让你对VUE3的掌握更进一步。

需求分析

本次我们要解决的是完成和未完成状态的切换。为此，我们需完成以下子任务：

点击左上角的折叠菜单图标，展开菜单。
为菜单添加“已完成”和“未完成”两个选项。
当用户点击“已完成”或“未完成”时，将相应状态的待办事项列出。

代码实现

1. 构建菜单结构

首先，我们需要在<template>标签内添加菜单结构：

<div id="app">
  <div class="container">
    <h1>Todo List</h1>
    <button @click="toggleMenu">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
    </button>
    <nav class="menu" :class="{ active: showMenu }">
      <ul>
        <li><a href="#" @click="filterTodos('all')">所有</a></li>
        <li><a href="#" @click="filterTodos('active')">未完成</a></li>
        <li><a href="#" @click="filterTodos('completed')">已完成</a></li>
      </ul>
    </nav>

    <main>
      <!-- Todo List Here -->
    </main>
  </div>
</div>

其中，<button>用于展开/折叠菜单，<nav>用于展示菜单选项。

2. 添加状态过滤功能

接下来，我们需要在<script>标签内添加状态过滤功能：

import { ref, computed } from 'vue'

export default {
  setup() {
    const todos = ref([
      { id: 1, title: 'Learn Vue 3', completed: false },
      { id: 2, title: 'Build a Todo App', completed: false },
      { id: 3, title: 'Write a Blog Post', completed: true }
    ])

    const showMenu = ref(false)

    const filter = ref('all')

    const filteredTodos = computed(() => {
      if (filter.value === 'all') {
        return todos.value
      } else {
        return todos.value.filter(todo => todo.completed === (filter.value === 'completed'))
      }
    })

    const filterTodos = (status) => {
      filter.value = status
    }

    const toggleMenu = () => {
      showMenu.value = !showMenu.value
    }

    return {
      todos,
      showMenu,
      filter,
      filteredTodos,
      filterTodos,
      toggleMenu
    }
  }
}

在代码中，我们使用computed计算属性filteredTodos来过滤待办事项。

3. 渲染待办事项

最后，在<main>标签内渲染待办事项：

<ul>
  <li v-for="todo in filteredTodos" :key="todo.id">
    <label>
      <input type="checkbox" v-model="todo.completed">
      <span>{{ todo.title }}</span>
    </label>
  </li>
</ul>