Vue 响应式渲染 - 待办事项简单实现
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 响应式渲染 - 待办事项简单实现
目录
待办事项简单实现
页面初始化
双向绑定的指令
增加留言列表设置
增加删除按钮
最后优化
总结
待办事项简单实现
页面初始化
对页面进行vue的引入、创建输入框和按钮及实例化Vue。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../lib/vue.js"></script>
</head>
<body>
<div id="box"><input type="text" /><button>Add</button>
</div>
<script>new Vue({el: "#box", // element})
</script>
</body>
</html>
双向绑定的指令
使用v-model对input元素进行双向绑定，并在按钮上设置点击事件。
V-model只能绑定在表单元素上。
示例如下：
<div id="box"><input type="text" v-model="mytext"/><button @click="handelAdd()">Add</button>
</div>
<script>new Vue({el: "#box", // elementdata:{mytext:'今日任务'},methods:{handelAdd() {console.log('点击add按钮')}}})
</script>
增加留言列表设置
设置ul元素用以渲染留言列表数据。
并在点击事件中对留言列表数据通过push方式增加。
示例如下：
<div id="box"><input type="text" v-model="mytext"/><button @click="handelAdd()">Add</button><ul><li v-for="item in datalist">{{item}}</li></ul>
</div>
<script>new Vue({el: "#box", // elementdata:{mytext:'今日任务',datalist:["第一件事", "第二件事", "第三件事"]},methods:{handelAdd() {console.log('点击add按钮')this.datalist.push(this.mytext)}}})
</script>
<div id="box"><input type="text" v-model="mytext"/><button @click="handelAdd()">Add</button><ul><li v-for="item in datalist">{{item}}</li></ul>
</div>
<script>new Vue({el: "#box", // elementdata:{mytext:'今日任务',datalist:["第一件事", "第二件事", "第三件事"]},methods:{handelAdd() {console.log('点击add按钮')this.datalist.push(this.mytext)}}})
</script>实现效果：
增加删除按钮
在原来基础上增加删除已完成的事件或留言功能。
示例如下：
<li v-for="item in datalist">{{item}}<button>Del</button>
</li>按钮绑定删除事件
示例如下：
<li v-for="(item, index) in datalist">{{item}}<button @click="handelDel(index)">Del</button>
</li>删除事件处理
示例如下：
handelDel(index) {this.datalist.splice(index, 1)
}
最后优化
通过判断datalist显示和隐藏列表和提示。
示例如下：
<div id="box"><input type="text" v-model="mytext"/><button @click="handelAdd()">Add</button><div v-show="!datalist.length">待办事项暂时没有了，快添加吧！</div><ul v-show="datalist.length"><li v-for="(item, index) in datalist">{{item}}<button @click="handelDel(index)">Del</button></li></ul>
</div>
<script>new Vue({el: "#box", // elementdata:{mytext:'今日任务',datalist:["第一件事", "第二件事", "第三件事"]},methods:{handelAdd() {console.log('点击add按钮')this.datalist.push(this.mytext)// 置空mytext内容this.mytext = ''},handelDel(index) {this.datalist.splice(index, 1)}}})
</script>最终效果：
总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 响应式渲染 - 待办事项简单实现
相关文章：
Vue 响应式渲染 - 待办事项简单实现
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 响应式渲染 - 待办事项简单实现 目录 待办事项简单实现 页面初始化 双向绑定的指令 增加留言列表设置 增加删除按钮 最后优化 总结 待办事项简单实现 页面初始化 对页面进行vue的引入、创建输入框和按钮及实例化V…...
SpringBoot基础概念介绍-数据源与数据库连接池
🙋大家好！我是毛毛张! 🌈个人首页： 神马都会亿点点的毛毛张 毛毛张今天介绍的SpringBoot中的基础概念-数据源与数据库连接池，同时介绍SpringBoot整合两种连接池的教程 文章目录 1 数据库与数据库管理系统2 JDBC与数…...
【面试】【前端】SSR与SPA的优缺点
一、SSR 概述 SSR（Server-Side Rendering）是指在服务器端生成 HTML 页面，并将其直接返回给浏览器的渲染方式。 在前端早期阶段，SSR 是主流，后来因性能优化和用户体验的需求逐渐发展出 SPA（单页应用&#x…...
Microsoft Visual Studio 2022 主题修改（补充）
Microsoft Visual Studio 2022 透明背景修改这方面已经有很多佬介绍过了，今天闲来无事就补充几点细节。 具体的修改可以参考：Microsoft Visual Studio 2022 透明背景修改（快捷方法）_material studio怎么把背景弄成透明-CSDN博客文…...
数科OFD证照生成原理剖析与平替方案实现
一、 引言 近年来，随着电子发票的普及，OFD格式作为我国电子发票的标准格式，其应用范围日益广泛。然而，由于不同软件生成的OFD文件存在差异，以及用户对OFD文件处理需求的多样化，OFD套餐转换工具应运而生。本…...
(done) ABI 相关知识补充：内核线程切换、用户线程切换、用户内核切换需要保存哪些寄存器？
由于操作系统和编译器约定了 ABI，如下： 编译器在对 C 语言编译时，会自动 caller 标注的寄存器进行保存恢复。保存的步骤通常发生在进入函数的时候，恢复的步骤通常发生在从函数返回的时候。 内核线程切换需要保存的寄存器&#…...
9. 马科维茨资产组合模型+FF5+GARCH风险模型优化方案（理论+Python实战）
目录 0. 承前1. 核心风险函数代码讲解1.1 数据准备和初始化1.2 单资产GARCH建模1.3 模型拟合和波动率预测1.4 异常处理机制1.5 相关系数矩阵计算1.6 构建波动率矩阵1.7 计算协方差矩阵1.8 确保矩阵对称性1.9 确保矩阵半正定性1.10 格式转换和返回1.11 calculate_covariance_mat…...
Linux 多路转接select
Linux 多路转接select 1. select select() 是一种较老的多路转接IO接口，它有一定的缺陷导致它不是实现多路转接IO的最优选择，但 poll() 和 epoll() 都是较新版的Linux系统提供的，一些小型嵌入式设备的存储很小，只能使用老版本的…...
最近最少使用算法（LRU最近最少使用）缓存替换算法
含义 最近最少使用算法（LRU）是一种缓存替换算法，用于在缓存空间有限的情况下，选择最少使用的数据项进行替换。该算法的核心思想是基于时间局部性原理，即刚被访问的数据在未来也很有可能被再次访问。 实现 LRU算法的…...
信息学奥赛一本通 1342：【例4-1】最短路径问题
【题目描述】 平面上有n个点（n<100），每个点的坐标均在-10000~10000之间。其中的一些点之间有连线。 若有连线，则表示可从一个点到达另一个点，即两点间有通路，通路的距离为两点间的直线距离。现在的任务是…...
【实践案例】使用Dify构建文章生成工作流【在线搜索+封面图片生成+内容标题生成】
文章目录 概述开始节点图片封面生成关键词实时搜索主题参考生成文章详情和生成文章标题测试完整工作流运行测试结果 概述 使用Dify构建文章生成工作流，使用工具包括：使用 Tavily 执行的搜索查询，使用Flux生成封面图片，使用Stable…...
MyBatis 写法
MyBatis 高效使用技巧 常见 MyBatis 使用技巧，这些技巧有助于简化数据库操作，提高开发效率，并增强系统的性能。 1. 动态 SQL 动态 SQL 让开发者能够依据参数灵活地构建 SQL 语句，避免了手动拼接字符串带来的复杂性和错误风险。…...
Web3 如何赋能元宇宙，实现虚实融合的无缝对接
随着技术的飞速发展，元宇宙作为一个未来数字世界的概念，正在吸引全球范围内的关注。而 Web3 技术的兴起，为元宇宙的实现提供了强大的支撑。Web3 是基于区块链技术的去中心化网络，它在改变互联网的同时，也推动着虚拟世界…...
== true时候，hashcode是否相同？)
C#常考随笔3：对象比较obj1.Equals(obj2)== true时候，hashcode是否相同？
一般情况下是相同的，但在自定义类型中，重写了Equals方法，就可能不同。 Equals： 1. 首先，关于Equals方法： Equals 方法最初定义在 Object 类中，所有的类都直接或间接地继承自 Object 类&#…...
深入探索SQL中修改表字段属性的技巧与策略
摘要 在SQL中，修改表字段属性是一项常见的数据库管理任务。用户可以调整字段的数据类型、长度、默认值或注释，而无需更改字段名称。例如，varchar类型可转换为mediumtext或text，NVARCHAR2类型可转换为NCLOB。若需同时变更字段名称及…...
gif动画图像优化，相同的图在第2,4,6帧中重复出现，会增加图像体积吗？
对于 GIF 图像，情况与 Git 文件存储有所不同。GIF 是一种图像格式，其体积主要取决于图像的内容、颜色数量、优化设置等因素。如果在 GIF 动画中，相同的图像在第 2、4、6 帧中重复出现，是否会增加图像体积，取决于以下几…...
LangChain的开发流程
文章目录 LangChain的开发流程开发密钥指南3种使用密钥的方法编写一个取名程序 LangChain表达式 LangChain的开发流程 为了更深人地理解LangChain的开发流程，本文将以构建聊天机器人为实际案例进行详细演示。下图展示了一个设计聊天机器人的LLM应用程序。 除了Wb服务…...
电商系统-用户认证（四）Oauth2授权模式和资源服务授权
本文章介绍：Oauth2.0 常见授权模式，资源服务授权 。 准备工作 搭建认证服务器之前，先在用户系统表结构中增加如下表结构： CREATE TABLE oauth_client_details (client_id varchar(48) NOT NULL COMMENT 客户端ID，主…...
[答疑]DDD伪创新哪有资格和仿制药比
DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 远航 2025-1-24 10:40 最近的热门话题仿制药，想到您经常批评的伪创新，这两者是不是很像？ UMLChina潘加宇 伪创新哪有资格和仿制药比。 仿制药的…...
图漾相机——Sample_V1示例程序
文章目录 1.SDK支持的平台类型1.1 Windows 平台1.2 Linux平台 2.SDK基本知识2.1 SDK目录结构2.2 设备组件简介2.3 设备组件属性2.4 设备的帧数据管理机制2.5 SDK中的坐标系变换 3.Sample_V1示例程序3.1 DeviceStorage3.2 DumpCalibInfo3.3 NetStatistic3.4 SimpleView_SaveLoad…...
系统架构设计师教材：信息系统及信息安全
信息系统 信息系统的5个基本功能：输入、存储、处理、输出和控制。信息系统的生命周期分为4个阶段，即产生阶段、开发阶段、运行阶段和消亡阶段。 信息系统建设原则 1. 高层管理人员介入原则：只有高层管理人员才能知道企业究竟需要什么样的信…...
Kafka 深入客户端 — 事务
Kafka 事务确保了数据在写入Kafka时的原子性和一致性。 1 幂等 幂等就是对接口的多次调用所产生的结果和调用一次是一致的。 Kafka 生产者在进行重试的时候可能会写入重复的消息，开启幂等性功能后就可以避免这种情况。将生产者客户端参数enable.idempotence设置为…...
TensorFlow 2基本功能和示例代码
TensorFlow 2.x 是 Google 开源的一个深度学习框架，广泛用于构建和训练机器学习模型。 一、核心特点 1. Keras API 集成 TensorFlow 2.x 将 Keras 作为其核心 API，简化了模型的构建和训练流程。Keras 提供了高层次的 API，易于使用和理解。…...
ZZNUOJ(C/C++)基础练习1011——1020(详解版)
1011 : 圆柱体表面积 题目描述 输入圆柱体的底面半径r和高h，计算圆柱体的表面积并输出到屏幕上。要求定义圆周率为如下宏常量 #define PI 3.14159 输入 输入两个实数，表示圆柱体的底面半径r和高h。 输出 输出一个实数，即圆柱体的表面积&…...
Python 字典：快速掌握高效的数据存储方式
文章目录 一、什么是字典？字典的定义二、字典的基本操作1. 访问字典的值2. 修改字典中的值3. 添加新的键值对4. 删除键值对5. 获取字典长度三、字典的遍历1. 遍历键2. 遍历值3. 遍历键值对四、字典的常用方法1. `keys()`：获取所有键2. `values()`：获取所有值3. `items()`：获…...
Baklib探索内容中台的核心价值与实施策略
内容概要 在数字化转型的背景下，内容中台逐渐成为企业数字化策略中的关键组成部分。内容中台是一个集成的内容管理体系，旨在打破信息孤岛，使内容能够在各个业务部门和平台之间高效流通。这种管理体系不仅能够提升内容的生产效率，…...
网络安全攻防实战：从基础防护到高级对抗
📝个人主页🌹：一ge科研小菜鸡-CSDN博客 🌹🌹期待您的关注 🌹🌹 引言 在信息化时代，网络安全已经成为企业、政府和个人必须重视的问题。从数据泄露到勒索软件攻击，每一次…...
论文阅读(十三)：复杂表型关联的贝叶斯、基于系统的多层次分析：从解释到决策
1.论文链接：Bayesian, Systems-based, Multilevel Analysis of Associations for Complex Phenotypes: from Interpretation to Decision 摘要： 遗传关联研究（GAS）报告的结果相对稀缺，促使许多研究方向。尽管关联概念…...
13.zookeeper开机自启动配置
要在Linux(RHEL7.7)系统中设置zookeeper开机自启动，可以创建一个系统服务单元文件。以下是为详细配置部署，假设你已经安装了zookeeper并且可以通过zkServer.sh命令启动它。 1.进入/lib/systemd/system目录 命令： cd /lib/systemd/system [root@rhel77 system]# cd /lib/…...
“““【运用 R 语言里的“predict”函数针对 Cox 模型展开新数据的预测以及推理。】“““
主题与背景 本文主要介绍了如何在R语言中使用predict函数对已拟合的Cox比例风险模型进行新数据的预测和推理。Cox模型是一种常用的生存分析方法，用于评估多个因素对事件发生时间的影响。文章通过具体的代码示例展示了如何使用predict函数的不同参数来获取生存概率和…...