Vue中TodoList案例_勾选

与上一篇Vue中TodoList案例_添加有三个文件变化了

App.vue:中加了checkTodo方法

<template><div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader :addTodo="addTodo"/><MyList :todos="todos" :checkTodo="checkTodo"/><MyFooter/></div></div></div></template><script>
import MyHeader from './components/MyHeader'
import MyList from './components/MyList'
import MyFooter from './components/MyFooter'export default {name:'App',components:{MyHeader,MyList,MyFooter},data(){return{todos:[{id:'001',title:'唱',done:true},{id:'002',title:'跳',done:false},{id:'003',title:'rap',done:true},{id:'004',title:'篮球',done:true}]}},methods:{//添加一个todoaddTodo(todoObj){this.todos.unshift(todoObj)},//勾选or取消勾选一个todocheckTodo(id){this.todos.forEach((todo)=>{if (todo.id===id)todo.done=!todo.done})}}
}
</script><style>
/*base*/
body {background: #fff;
}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;
}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;
}.btn-danger:hover {color: #fff;background-color: #bd362f;
}.btn:focus {outline: none;
}.todo-container {width: 600px;margin: 0 auto;
}
.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;
}
</style>

MyList.vue:中拿到checkTodo,再传给MyItem

<template><ul class="todo-main"><MyItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" :checkTodo="checkTodo"/></ul>
</template><script>
import MyItem from "./MyItem";
export default {name: "MyList",components:{MyItem},props:['todos','checkTodo']
}
</script><style scoped>
.todo-main{margin-left: 0px;border: 1px solid #ddd;border-radius: 2px;padding: 0px;
}.todo-empty{height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left:5px;margin-top: 10px;
}
</style>

MyItem.vue:定义change改变时候触发方法将id传给App.vue

<template><div><li><label ><input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/> <!--给input指定一个checked选项,如果是true就勾选上,如果是false就不勾选--><span>{{todo.title}}</span></label><button class="btn btn-danger" style="display:none">删除</button></li></div>
</template><script>
export default {name: "MyItem",//声明接收对象props:['todo','checkTodo'],methods:{handleCheck(id){//通知App组件将对应的todo对象的done值取反this.checkTodo(id)}}
}
</script><style scoped>
li{list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;
}
li label{float:left;cursor: pointer;
}li label li input{vertical-align: middle;margin-right: 6px;position: relative;top: -1px;
}li button{float: right;display: none;margin-top: 3px;
}li:before{content: initial;
}
li:last-child{border-bottom: none;
}
</style>

效果:勾选时候数据动态变化

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/7471.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL必知必会 第25章-使用触发器

25.1 触发器 触发器适用于MySQL 5及以后的版本 某条语句&#xff08;某些语句&#xff09;在事件发生时自动执行&#xff08;在某个表发生改变时自动处理&#xff09; 触发器是MySQL响应以下任意语句而自动执行的一条MySQL语句&#xff08;或位于BEGIN和END语句之间的一组语气…

【LeetCode 算法】Jewels and Stones 宝石与石头

文章目录 Jewels and Stones 宝石与石头问题描述&#xff1a;分析代码 Tag Jewels and Stones 宝石与石头 问题描述&#xff1a; 给你一个字符串 jewels 代表石头中宝石的类型&#xff0c;另有一个字符串 stones 代表你拥有的石头。 stones 中每个字符代表了一种你拥有的石头…

Linux学习之case

case的格式如下&#xff1a; case "变量" in值1)指令集1;;值2)指令集2;;*)指令集n;; esaccase会将变量的值跟值1、值2等进行比较&#xff0c;符合就执行后边对应的指令集&#xff0c;注意)只是一个标识&#xff0c;表明这是一个分支&#xff0c;;;是一个分支结束&am…

Sentinel 规则持久化到 Nacos

一、Sentinel规则管理模式&#x1f349; Sentinel的控制台规则管理有三种模式&#xff1a; 原始模式&#x1f95d; 原始模式&#xff1a;控制台配置的规则直接推送到Sentinel客户端&#xff0c;也就是我们的应用。然后保存在内存中&#xff0c;服务重启则丢失 pull模式&#…

对于MyBatis的深入介绍

对于MyBatis的深入介绍 当涉及到数据库操作时&#xff0c;MyBatis是一种广泛使用的ORM&#xff08;对象关系映射&#xff09;框架。MyBatis的主要目标是简化数据库交互&#xff0c;并提供对SQL的灵活控制。下面是对MyBatis的详细介绍&#xff1a; 数据库交互&#xff1a;MyBat…

平台化的测试工具推荐|一站式测试平台RunnerGo

互联网行业的发展到今天越来越多的公司更加注重工作效率和团队协作&#xff0c;越来越多的产品也趋于平台化&#xff0c;平台化也更有利于提高团队效率&#xff0c;代码管理、持续构建、持续部署这些工具的发展都是非常超前的&#xff0c;它们对于团队协作的支持和工作效率的提…

【前端知识】React 基础巩固(三十三)——Redux的使用详解

React 基础巩固(三十三)——Redux的使用详解 Redux的使用详解 针对React 基础巩固&#xff08;三十二&#xff09;中的案例&#xff0c;我们希望抽取页面中共有的代码&#xff08;例如下方的代码&#xff09;&#xff0c;使用高阶组件统一拦截。 constructor() {super();this.…

2023-07-25 monetdb-relation-关键数据结构-记录

摘要: monetdb-relation-关键数据结构-记录 关键数据结构: expression_type typedef enum expression_type {e_atom,e_column,e_cmp,e_func,e_aggr,e_convert,e_psm } expression_type; expression typedef struct expression {expression_type type; /* atom, cmp, func/aggr…

搜集了一些题

kafka为什么会重复消费消息? 在kafka提交offset的时候,可能由网络延迟或者某些原因导致,offset没有同步,导致其他consumer消费了已经消费的消息 kafka如何实现顺序消费? kafak的话需要将顺序消费的消息通过指定分区策略发送到指定的partition中 如果了解rocketMq的话,可以顺带…

Packet Tracer – 配置动态 NAT

Packet Tracer – 配置动态 NAT 拓扑图 目标 第 1 部分&#xff1a;配置动态 NAT 第 2 部分&#xff1a;验证 NAT 实施 第 1 部分&#xff1a; 配置动态 NAT 步骤 1&#xff1a; 配置允许的流量。 在 R2 上&#xff0c;为 ACL 1 配置一个语句以允许属于 172.16.0.…

【Docker-compose】基于Docker-compose创建LNMP环境并运行Wordpress网站平台

基于Docker compose创建LNMP环境并运行Wordpress网站平台 1.Docker-Compose概述2. YAML文件格式及编写注意事项3. Docker-Compose配置常用字段4.Docker Compose常用命令5.使用Docker-compose创建LNMP环境&#xff0c;并运行Wordpress网站平台5.1 Docker Compose环境安装5.2 使用…

深入解析 SOCKS5 代理与网络安全

一、SOCKS5 代理技术概述 SOCKS5&#xff08;Socket Secure 5&#xff09;代理是 SOCKS 协议的最新版本&#xff0c;它允许客户端在客户端与代理服务器之间建立一个安全通道&#xff0c;并通过此通道发送请求并访问远程服务器。与 HTTP/HTTPS 代理相比&#xff0c;SOCKS5 代理在…

【外键合并python】

外键合并&#xff08;Foreign Key Merge&#xff09; 外键合并是指在数据库或者数据表中&#xff0c;通过共同的外键将多个数据表合并在一起的操作。在 Excel 表格中&#xff0c;我们可以使用外键来将多个表格合并&#xff0c;类似于数据库中的关联操作。 步骤一&#xff1a;…

SpringBoot项目——springboot配置Tomcat两个端口,https和http的方式 jar的打包和运行

目录 引出springboot配置Tomcat两个端口&#xff0c;https和http的方式1.生成SSL证书2.配置client.p12和https端口3.配置http的8080端口WebServerFactoryCustomizer接口4.启动项目 项目应用&#xff1a;在某项目中有一个功能需要https协议Tomcat启动https和http两个端口根据htt…

工业物联网网关让PLC数据手机端监控和报警更加简单

在传统的工厂管理中&#xff0c;我们想要看到现场设备的实时数据&#xff0c;必须在控制室内通过工控机、电脑、触摸屏等这些上位机设备才能看到&#xff0c;同理PLC维护也需要工程师在现场进行编程调试工作&#xff0c;非常不方便。 随着工业物联网的发展&#xff0c;作为设备…

“学习嵌入式开发:明确目标,提升技能“

嵌入式领域涵盖广泛&#xff0c;不可能一次性掌握所有知识。因此&#xff0c;明确学习目标和方向非常重要。选择感兴趣且与职业发展相关的领域进行深入学习是明智之举。 嵌入式技术在不断发展&#xff0c;过去与现在存在差异。选择学习当前行业的主流技术和趋势是明智选择。掌…

抖音矩阵系统源码开发搭建部署分享

一、 功能开发设计 &#xff08;1&#xff09;数据概览&#xff1a;账号&#xff0c;视频top10数据统计 &#xff08;2&#xff09;AI视频创意&#xff1a;原创视频批量剪辑&#xff0c;阶乘算法&#xff0c;去重原理 &#xff08;3&#xff09;同城拓客&#xff1a;线下门店…

【Java基础教程】(四十六)IO篇 · 下:System类对IO的支持:错误输出、信息输出、系统输入,字符缓冲流、扫描流和对象序列化流~

Java基础教程之IO操作 下 &#x1f539;本节学习目标1️⃣ System类对 IO 的支持1.1 错误输出&#xff1a;System.err1.2 信息输出&#xff1a;System.out1.3 系统输入&#xff1a;System. in 2️⃣ 字符缓冲流&#xff1a;BufferedReader3️⃣ 扫描流&#xff1a;Scanner4️⃣…

两个数组的dp问题(2)--动态规划

一)交错字符串: 97. 交错字符串 - 力扣&#xff08;LeetCode&#xff09; 一)确定一个状态标识: 如果我选择s1的一段区间&#xff0c;再进行选择s2得一段区间那么s3这个字符串的长度就已经固定了 预处理:在s1字符串s2字符串和s3字符串前面加上一个虚拟字符&#xff0c;让下标从…

【MyBatis-Plus 进阶学习笔记】

MyBatis-Plus 进阶学习笔记记录 一、 MyBatis Plus 七大功能0. 数据准备1. 逻辑删除2. 自动填充2.1 优化1 自动填充 有的类没有更新和创建时间字段2.2 优化2 自己设置时间时填充自己设置的&#xff0c;不设置时自动填充 3. 乐观锁插件 注&#xff1a;wrapper不能服用4. 性能分析…