Vue —— TodoList案例 01

最新推荐文章于 2024-05-31 16:06:33 发布

人鱼望山荷

最新推荐文章于 2024-05-31 16:06:33 发布

阅读量1.7k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_54966486/article/details/123402045

版权

本文通过Vue.js实现一个TodoList应用，详细解析App.vue、TodoHeader.vue、TodoList.vue、TodoItem.vue、TodoFooter.vue及main.js的代码，展示如何在前端构建功能完备的任务管理器。

摘要由CSDN通过智能技术生成

页面展示

在这里插入图片描述

相关Vue代码

记得终端导入 nanoid ： npm i nanoid

App.vue

<template>
<div id="app">
    <div class="todo-container">
    <div class="todo-wrap">
      <TodoHeader :add="addTodo" />
      <TodoList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
      <TodoFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
    </div>
  </div>
</div>
</template>

<script>
    //引入组件
    import TodoHeader from './components/TodoHeader.vue'
    import TodoFooter from './components/TodoFooter.vue'
    import TodoList from './components/TodoList.vue'


    export default {
    
        name:'App',
        components:{
    TodoHeader,TodoFooter,TodoList},


        data(){
    
          return{
    
            todos:[
              {
    id:'001',title:'抽烟',done:true},
              {
    id:'002',title:'喝酒',done:false},
              {
    id:'003',title:'打架',done:true},
              {
    id:'004',title:'爱国',done:false}
            ]
          }
        },


        methods:{
    
          //添加一个todo
          addTodo(todoObj){
    
              this.todos.unshift(todoObj)
          },
          //勾选or取消勾选一个todo
          checkTodo(id){
    
            this.todos.forEach((todo)=>{
    
              //函数体
              if(todo.id === id) todo.done = !todo.done
            })
          },
          //删除一个todo
          deleteTodo(id){
    
            //过滤不会改变原对象，所以要重新赋值
            this.todos = this.todos.filter((todo)=>{
    
              return todo.id !== id 
            })
          },
          //全选 or 全不选