Vue3 实现简单 todo-list

一、概述

通过 todo-list 来学一些 vue3 的知识。

二、设计

维护两个列表，一个待办事项，一个已完成事项。

三、界面

3.1 模板部分

<template>
  <h2>云胡待办事项</h2>
  <div id="todo-list">
    <el-row>
    <el-col :span = "12">
    <ul class = "card">
        <div> 待办事项
        <template v-for="(todo, index) in todos" :key="index" >
            <el-row>
                <div class = "todo-list-content"> 
                <el-col class = "one-todo-list-content-title">
                    {{ index+1+":" }} {{ todo.title }} 
                </el-col>
                <el-col class = "one-todo-list-content">
                    <el-button type="primary" v-on:click = "todoCardFinishTodo(index)">完成</el-button>
                </el-col>
                <el-col class = "one-todo-list-content">
                    <el-button type="danger" v-on:click = "deleteTodo(index)">删除</el-button>
                </el-col>
            </div>
            </el-row>     
        </template>
        </div>
    </ul>

    </el-col>
    <el-col :span = "12">
    <ul class = "card-two">
        <div> 已完成事项
        <template v-for="(todo, index) in finishTodos" :key="index" >
            <el-row>
                <div class = "todo-list-content"> 
                <el-col class = "one-todo-list-content-title" v-if = "finishState">
                    {{ index+1+":" }} {{ todo.title }} 
                </el-col>
                <el-col class = "one-todo-list-content">
                    <el-button type="danger" v-on:click = "deleteFinishList(index)">删除</el-button>
                </el-col>
            </div>
            </el-row>     
        </template>
        </div>
    </ul>
    </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
        <el-form class = "el-form-add">
            <el-input
                v-model="newTodoText"
                id="new-todo"
                placeholder="例如：运动">
            </el-input>
            <el-button type="primary" v-on:click = "addNewTodo">
                添加
            </el-button>
        </el-form>
        </el-col>
    </el-row>
  </div>
</template>

3.2 css 部分

<style>
.el-form{
    float: left; 
}

.el-form-add{
    width: 50%; 
    float: right; 
}

.el-input{
    margin-left: 15px;
    margin-right: 15px;
    width: 150px;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 50%;
    border-radius: 5px;
    padding: 5px;
    margin-right: 10px;
    float: right;
}

.card-two {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 50%;
    border-radius: 5px;
    padding: 5px;
    margin-left: 10px;
    float: left;
}

.todo-list-content{
    margin: 5px;
}

.one-todo-list-content{
    margin: 5px;
}

.one-todo-list-content-title{
     margin: 5px;
     width: 110px;
     text-align: left;
}
</style>

3.3 展示

3.3.1 默认

3.3.2 添加一个待办事项

添加 「做饭」 事项。

3.3.3 删除一个待办事项

删除 「看电影」 事项。

3.3.4 完成一个待办事项

完成 「阅读」 待办事项。

3.3.5 删除已完成事项

删除 「阅读」 已完成事项。

四、js 部分

<script>
import { ref, reactive } from "vue";
import { ElMessage } from 'element-plus'


export default {
  name: "TodoList",
  setup() {
    const newTodoText = ref("");
    const nextTodoId = ref(4);
    const finishTodoIndex = ref(0);

    const finishState = ref(false);

    const todos = reactive([
      {
        id: 1,
        title: "看电影",
      },
      {
        id: 2,
        title: "阅读",
      },
      {
        id: 3,
        title: "做题",
      },
    ]);

    const finishTodos = reactive([]);

    /**
     * 添加一个新的待办事项
     */
    const addNewTodo = () => {
      if (newTodoText.value == "") {
        ElMessage.error("不可以添加空的待办事项");
      } else {
        todos.push({
          id: nextTodoId.value++,
          title: newTodoText.value,
        });
        newTodoText.value = "";
      }
    };

    /**
     * 删除一个待办事项
     */
    const deleteTodo = (index) => {
      todos.splice(index, 1);
    };

    /**
     * 完成一个待办事项
     */
    const todoCardFinishTodo = (index) =>{
        finishTodos.push(
            {
                id: index,
                title: todos[index].title
            }
        )
        finishState.value = true;
        todos.splice(index, 1);
    };

    /**
     * 删除已完成事项
     */
    const deleteFinishList = (index) =>{
        finishTodos.splice(index, 1);
    }


    return {
      newTodoText,
      todos,
      nextTodoId,
      finishTodos,
      finishTodoIndex,
      finishState,
      addNewTodo,
      deleteTodo,
      todoCardFinishTodo,
      deleteFinishList
    };
  },
};
</script>