Vue53-Todo-list案例

2024-06-17 03:04
文章标签 案例 list todo vue53

本文主要是介绍Vue53-Todo-list案例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、需求:

二、组件的划分:按照功能划分

组件起名,不要和html内置元素重名!

Vue鼓励组件名用多个单词

三、组件化编码流程 

3-1、实现静态组件 

将各个组件的基本框架写好,并在App.vue文件中进行引入和注册。

将已有的html元素和css样式,都复制到App.vue文件中,并一个个拆分到对应的组件。

3-2、展示动态数据 

创建id的函数: 

3-3、组件之间的传值

App.vue给谁传都能传。 

解决:两个兄弟之间数据的传递:

 

 

注意:

 

实现勾选功能

数据在哪里,操作数据的方法就在哪里。

App.vue

 

若是input类型是checkbox,并且v-model绑定的是boolean值,则这个 boolean值能决定checkbox是否勾选。

props得到的内容是只读的!但是此写法不报错,因为此修改vue检测不到。

虽然不报错,但是不建议这么写。

3-4、删除列表值

App.vue中写删除函数

 

传值给MyList组件

MyList组件接收删除函数,并传给MyItem组件 

MyItem组件接收删除函数,并调用函数,传入要删除数据的id 

 

3-5、底部统计

App.vue将todos数组传给MyFooter组件: 

MyFooter组件: 

高级写法: 

ES6,数组中的reduce方法

Array.prototype.reduce() 是一个强大的数组方法,它接收一个回调函数作为累加器

arr.reduce(callbackFunction(accumulator, currentValue), initialValue)

数组有几个字符,callbackFunction就调几次!

  • accumulator(累加器累加回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue;
  • currentValue(数组中正在处理的当前元素。)
  • initialValue(可选):作为第一次调用 callback 函数时的第一个参数的值。

3-6、底部交互

 

使用另一种写法:

删除所有已勾选的功能

数组的过滤:filter方法,不影响原数组。

 

四、小结

 

这篇关于Vue53-Todo-list案例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1068311

相关文章

六个案例搞懂mysql间隙锁

《六个案例搞懂mysql间隙锁》MySQL中的间隙是指索引中两个索引键之间的空间,间隙锁用于防止范围查询期间的幻读,本文主要介绍了六个案例搞懂mysql间隙锁,具有一定的参考价值,感兴趣的可以了解一下... 目录概念解释间隙锁详解间隙锁触发条件间隙锁加锁规则案例演示案例一:唯一索引等值锁定存在的数据案例二:

C#之List集合去重复对象的实现方法

《C#之List集合去重复对象的实现方法》:本文主要介绍C#之List集合去重复对象的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C# List集合去重复对象方法1、测试数据2、测试数据3、知识点补充总结C# List集合去重复对象方法1、测试数据

MySQL 表的内外连接案例详解

《MySQL表的内外连接案例详解》本文给大家介绍MySQL表的内外连接,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录表的内外连接(重点)内连接外连接表的内外连接(重点)内连接内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选,我

Python中合并列表(list)的六种方法小结

《Python中合并列表(list)的六种方法小结》本文主要介绍了Python中合并列表(list)的六种方法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋... 目录一、直接用 + 合并列表二、用 extend() js方法三、用 zip() 函数交叉合并四、用

Java Stream.reduce()方法操作实际案例讲解

《JavaStream.reduce()方法操作实际案例讲解》reduce是JavaStreamAPI中的一个核心操作,用于将流中的元素组合起来产生单个结果,:本文主要介绍JavaStream.... 目录一、reduce的基本概念1. 什么是reduce操作2. reduce方法的三种形式二、reduce

Spring Boot 整合 Redis 实现数据缓存案例详解

《SpringBoot整合Redis实现数据缓存案例详解》Springboot缓存,默认使用的是ConcurrentMap的方式来实现的,然而我们在项目中并不会这么使用,本文介绍SpringB... 目录1.添加 Maven 依赖2.配置Redis属性3.创建 redisCacheManager4.使用Sp

springboot项目redis缓存异常实战案例详解(提供解决方案)

《springboot项目redis缓存异常实战案例详解(提供解决方案)》redis基本上是高并发场景上会用到的一个高性能的key-value数据库,属于nosql类型,一般用作于缓存,一般是结合数据... 目录缓存异常实践案例缓存穿透问题缓存击穿问题(其中也解决了穿透问题)完整代码缓存异常实践案例Red

Java List排序实例代码详解

《JavaList排序实例代码详解》:本文主要介绍JavaList排序的相关资料,Java排序方法包括自然排序、自定义排序、Lambda简化及多条件排序,实现灵活且代码简洁,文中通过代码介绍的... 目录一、自然排序二、自定义排序规则三、使用 Lambda 表达式简化 Comparator四、多条件排序五、

Nginx使用Keepalived部署web集群(高可用高性能负载均衡)实战案例

《Nginx使用Keepalived部署web集群(高可用高性能负载均衡)实战案例》本文介绍Nginx+Keepalived实现Web集群高可用负载均衡的部署与测试,涵盖架构设计、环境配置、健康检查、... 目录前言一、架构设计二、环境准备三、案例部署配置 前端 Keepalived配置 前端 Nginx

MySQL 复合查询案例详解

《MySQL复合查询案例详解》:本文主要介绍MySQL复合查询案例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录基本查询回顾多表笛卡尔积子查询与where子查询多行子查询多列子查询子查询与from总结合并查询(不太重要)union基本查询回顾查询