利用Vue制作todoList demo

主要参考这篇博客

demo介绍

此demo页面分为三部分，输入框、待办区域和已办区域。

输入框可以添加待办事件，待办区域鼠标悬浮右侧滑出操作按钮可以标记完成以及删除，已办区域鼠标悬浮右侧滑出操作按钮可以标记未完成和删除。同时要满足刷新页面数据不消失。

完成效果如下

1. 数据结构的设计

todo存放当前代办名称，作为一个临时获取变量，todoList是一个对象数组，存放待办队列。todoLen为待办队列长度。

data() {
   
            return{
   
                todo: '',
                todoList: [],
                todoLen: 0
            }
        },

todoList中存储的待办对象为todoObj，结构如下

 let todoObj = {
   
                    todo: this.todo,
                    done: false,
                }

2. 在template中写入html部分，style标签内写入样式

根据待办对象中done的值利用v-for将不同的事件显示在待办区域或是已完成区域

<template>
    <div class="index">
        <!-- 输入 -->
        <header>
            <input type="text" v-model="todo" @keyup.enter="addTodo" placeholder="添加Todo事件">
        </header>

        <!-- 待办区域 -->
        <h2>待办
            <span>{
   {
   todoLen}}</span></h2>
        <div class="todo">
            <ul>
                <li
                        v-for="(item, index) in todoList"
                        :key="index"
                        v-if="item.done == false">
                    <i></i>
                    <span>{
   {
   item.todo}}</span>
                    <div class="buttons">
                        <button
                                class="edit"
                                @click="changeTodo(index, true)">标记</button>
                        <button
                                class="delete"
                                @click="deleteTodo(index, true)">删除</button>
                    </div>
                </li>
            </ul>
        </div>
        <hr>

        <!-- 已完成区域 -->
        <h2>已完成
            <span>{
   {
   todoList.length - todoLen}}</span></h2>
        <div class="done">
            <ul