当前位置： 首页 > news >正文

Vue 响应式渲染 - 待办事项简单实现

news 2026/5/16 20:42:30

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…...

编程日记 2025/1/29 13:39:34

ResNeSt: Split-Attention Networks论文学习笔记

这张图展示了一个名为“Split-Attention”的神经网络结构&#xff0c;该结构在一个基数组&#xff08;cardinal group&#xff09;内进行操作。基数组通常指的是在神经网络中处理的一组特征或通道。图中展示了如何通过一系列操作来实现对输入特征的注意力机制。 以下是图中各部…...

编程日记 2025/1/29 13:36:26

澳洲硕士毕业论文写作中如何把握主题

每到毕业季时&#xff0c;澳洲硕士毕业论文写作是留学生学业的头等大事。但是经常有留学生在澳洲毕业论文写作过程中会遇到写了一半&#xff0c;但是不知道应该如何继续下去的问题。有时候是在literature review的部分就越写越觉得偏离了方向&#xff0c;有时候是在数据收集阶段…...

编程日记 2025/1/29 13:35:21

STM32 LED呼吸灯

接线图&#xff1a; 这里将正极接到PA0引脚上&#xff0c;负极接到GND&#xff0c;这样就高电平点亮LED&#xff0c;低电平熄灭。 占空比越大&#xff0c;LED越亮&#xff0c;占空比越小&#xff0c;LED越暗 PWM初始化配置 输出比较函数介绍&#xff1a; 用这四个函数配置输…...

编程日记 2025/1/29 13:34:15

Java数据库操作指南：快速上手JDBC【学术会议-2025年数字化教育与信息技术（DEIT 2025】

大会官网&#xff1a;www.ic-deit.org 前言 在现代企业应用中&#xff0c;数据库是数据存储和管理的重要组成部分。Java作为一种广泛使用的编程语言&#xff0c;提供了多种方式与数据库进行交互。本文将介绍 JDBC&#xff08;Java Database Connectivity&#xff09;&#x…...

编程日记 2025/1/29 13:33:00

2024年个人总结

序 照例&#xff0c;每年都有的个人年度总结来了&#xff0c;看了很多其他大佬的总结&#xff0c;感觉自己的2024过于单薄&#xff0c;故事也不太丰满&#xff0c;自己就回去比较&#xff0c;自己哪里做的不好 &#xff1f;但后来发现已经进入了一个思维误区。 年度总结年度总结…...

编程日记 2025/1/29 13:31:50

GitHub 仓库的 Archived 功能详解：中英双语

GitHub 仓库的 Archived 功能详解 一、什么是 GitHub 仓库的 “Archived” 功能&#xff1f; 在 GitHub 上&#xff0c;“Archived” 是一个专门用于标记仓库状态的功能。当仓库被归档后&#xff0c;它变为只读模式&#xff0c;所有的功能如提交代码、创建 issue 和 pull req…...

编程日记 2025/1/29 13:29:47

LeetCode：56.合并区间

跟着carl学算法&#xff0c;本系列博客仅做个人记录&#xff0c;建议大家都去看carl本人的博客&#xff0c;写的真的很好的&#xff01; 代码随想录 LeetCode&#xff1a;56.合并区间 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti,…...

编程日记 2025/1/29 13:28:42

Vue演练场基础知识（七）插槽

为学习Vue基础知识&#xff0c;我动手操作通关了Vue演练场&#xff0c;该演练场教程的目标是快速体验使用 Vue 是什么感受&#xff0c;设置偏好时我选的是选项式 单文件组件。以下是我结合深入指南写的总结笔记&#xff0c;希望对Vue初学者有所帮助。 文章目录 十五. 插槽插槽…...

编程日记 2025/1/29 13:26:35

进程池的制作（linux进程间通信，匿名管道... ...）

目录 一、进程间通信的理解 1.为什么进程间要通信 2.如何进行通信 二、匿名管道 1.管道的理解 2.匿名管道的使用 3.管道的五种特性 4.管道的四种通信情况 5.管道缓冲区容量 三、进程池 1.进程池的理解 2.进程池的制作 四、源码 1.ProcessPool.hpp 2.Task.hpp 3…...

编程日记 2025/1/29 13:17:22

【Linux】Linux C比较两个 IPv6 网关地址是否相等，包括前缀

功能说明 在 Linux 环境下使用 C 语言比较两个 IPv6 网关地址是否相等&#xff0c;包括前缀 实现步骤 解析 IPv6 地址&#xff1a;使用 inet_pton 将字符串形式的 IPv6 地址转换为二进制形式。解析前缀长度&#xff1a;从地址字符串中提取前缀长度&#xff08;如 /64&#xf…...

编程日记 2025/1/29 13:13:12

【uniapp】uniapp使用java线程池

标题 由于js是性能孱弱的单线程语言&#xff0c;只要在渲染中执行了一些其他操作&#xff0c;会中断渲染&#xff0c;导致页面卡死&#xff0c;卡顿&#xff0c;吐司不消失等问题。在安卓端可以调用java线程池&#xff0c;把耗时操作写入线程池里面&#xff0c;优化性能。 实…...

编程日记 2025/1/29 13:11:00

面试题-Java集合框架

前言 Java集合框架&#xff08;Java Collections Framework&#xff09;是Java平台提供的一套用于表示和操作集合的统一架构。它位于java.util包中&#xff0c;并且自Java 1.2&#xff08;也称为Java 2平台&#xff0c;标准版&#xff0c;即Java SE 2&#xff09;起成为Java平…...

编程日记 2025/1/29 13:09:58

Java基础教程（007）：方法的重载与方法的练习

文章目录 6.5 方法的重载6.6 方法练习数组遍历数组最大值 6.5 方法的重载 在 Java 中&#xff0c;方法的重载是指在同一个类中定义多个方法&#xff0c;这些方法具有相同的名称&#xff0c;但参数列表不同。方法的重载是一种实现多态的方式&#xff0c;允许一个方法名以不同的…...

编程日记 2025/1/29 12:59:42

【ESP32】ESP-IDF开发 | WiFi开发 | TCP传输控制协议 + TCP服务器和客户端例程

1. 简介 TCP&#xff08;Transmission Control Protocol&#xff09;&#xff0c;全称传输控制协议。它的特点有以下几点&#xff1a;面向连接&#xff0c;每一个TCP连接只能是点对点的&#xff08;一对一&#xff09;&#xff1b;提供可靠交付服务&#xff1b;提供全双工通信&…...

编程日记 2025/1/29 12:56:36

npm cnpm pnpm npx yarn的区别

npm、cnpm、pnpm、npx、yarn 这几个工具都与 Node.js 项目的包管理和命令执行相关&#xff0c;它们的区别具体如下&#xff1a; 本质与功能定位 npm&#xff1a;是 Node.js 官方的包管理工具&#xff0c;提供了安装、卸载、更新、发布等全方位的包管理功能&#xff0c;还能通…...

编程日记 2025/1/29 12:52:29

debian12.9编译freeswitch1.10.12【默认安装】

服务器操作系统 cat /etc/os-release PRETTY_NAME"Debian GNU/Linux 12 (bookworm)" NAME"Debian GNU/Linux" VERSION_ID"12" VERSION"12 (bookworm)" VERSION_CODENAMEbookworm IDdebian HOME_URL"https://www.debian.org/&quo…...

编程日记 2025/1/29 12:49:19

使用 C/C++ 调用 libcurl 调试消息

在使用 C/C 调用 libcurl 进行 HTTP 请求时&#xff0c;有时我们需要查看请求的/应答消息的内容&#xff08;包括请求头和请求体&#xff09;以方便调试。libcurl 提供了多种方法来捕获和输出这些信息&#xff0c;本文介绍具体的使用方式。 1. libcurl 调试工具简介 libcurl 是…...

编程日记 2025/1/29 12:47:03

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》030-自定义组件的插槽Mixin

标题详情作者简介愚公搬代码头衔华为云特约编辑&#xff0c;华为云云享专家&#xff0c;华为开发者专家&#xff0c;华为产品云测专家&#xff0c;CSDN博客专家&#xff0c;CSDN商业化专家&#xff0c;阿里云专家博主&#xff0c;阿里云签约作者&#xff0c;腾讯云优秀博主&…...

编程日记 2025/1/29 12:43:54

大一计算机的自学总结：异或运算

前言 异或运算这个操作看上去很匪夷所思&#xff0c;实际上作用非常大。 一、异或运算的性质 1.异或运算就是无进位相加。 2.满足交换律、结合律。 3.0^nn&#xff0c;n^n0。 4.若集合B为集合A子集&#xff0c;集合A异或和为x&#xff0c;集合B异或和为y&#xff0c;则集…...

编程日记 2025/1/29 12:42:45

从绿光到算法：深入解析PPG信号检测的核心技术与实践挑战

1. 绿光背后的秘密&#xff1a;为什么PPG传感器偏爱这种颜色 你可能已经注意到&#xff0c;市面上大多数智能手表的心率监测功能都会发出幽幽的绿光。这可不是为了好看——绿光在PPG&#xff08;光电容积脉搏波&#xff09;技术中扮演着关键角色。让我用一个简单的比喻来解释&…...

编程新知 2026/5/16 19:17:13

Fast-GitHub终极指南：如何将GitHub下载速度从KB/s提升到MB/s

Fast-GitHub终极指南&#xff1a;如何将GitHub下载速度从KB/s提升到MB/s 【免费下载链接】Fast-GitHub 国内Github下载很慢&#xff0c;用上了这个插件后&#xff0c;下载速度嗖嗖嗖的~&#xff01; 项目地址: https://gitcode.com/gh_mirrors/fa/Fast-GitHub 你是否曾因…...

编程新知 2026/5/16 19:10:14

2026届最火的十大降重复率网站横评

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 当下&#xff0c;学术创作效率需求持续提升&#xff0c;智能一键论文生成类工具&#xff0c;…...

编程新知 2026/5/16 19:06:13

L1正则与次梯度

L1&#xff1a;稀疏权重、解易落在轴上、特征选择&#xff08;应用场景&#xff09;、w0w0w0不可导需次梯度subgradient&#xff1a;∂f(x){g∣f(y)≥f(x)gT(y−x),∀ y∈dom f}\partial f(x)\{g|f(y)\geq f(x) g^T(y-x),\forall\ y\in \text{dom}\ f \}∂f(x){g∣f(y)≥f(x)g…...

编程新知 2026/5/16 18:44:58

GPT-Image 2 对标竞争者研发？——理性看待“对手传闻”的技术路径（2026 观察）

深度观察&#xff1a;OpenAI 是否在暗中加速 GPT-Image 2 对标竞争者研发&#xff1f;——理性看待“对手传闻”的技术路径&#xff08;2026 观察&#xff09;“竞争对手是否在秘密被研发&#xff1f;”“OpenAI 背后是不是在悄悄做某种 GPT-Image 2 的替代方案&#xff1f;”这…...

编程新知 2026/5/16 18:34:21

现代C++中的编译期反射替代思路

现代C中的编译期反射替代思路C 长期缺乏完整标准反射能力&#xff0c;但工程上依然经常需要“遍历字段、生成元信息、自动序列化、自动注册”。在正式反射广泛可用之前&#xff0c;开发者通常通过宏、模板特化、tuple 适配和代码生成等方式实现替代方案。一种常见思路是手工提供…...

编程新知 2026/5/16 18:13:51

Harness Open Source 与 GitLab 的区别：一个轻量一体化 DevOps 平台，一个完整 DevSecOps 平台

Harness：https://github.com/harness/harness 一、先给结论 Harness Open Source 和 GitLab 都可以做代码托管、代码协作、CI/CD 和制品管理，但二者的产品边界不同。 Harness Open Source 官方定位是一个开源的一体化开发平台，集成源码管理、CI/CD pipelines、托管开发环…...

编程新知 2026/5/16 17:29:22

如何快速清理Zotero重复文献：智能合并工具完整指南

如何快速清理Zotero重复文献&#xff1a;智能合并工具完整指南 【免费下载链接】ZoteroDuplicatesMerger A zotero plugin to automatically merge duplicate items 项目地址: https://gitcode.com/gh_mirrors/zo/ZoteroDuplicatesMerger 你是否经常为Zotero文献库中的重…...

编程新知 2026/5/16 17:25:00

为什么你的电脑风扇总是“抽风“？3个简单步骤彻底解决Windows风扇控制难题

为什么你的电脑风扇总是"抽风"&#xff1f;3个简单步骤彻底解决Windows风扇控制难题 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://git…...

编程新知 2026/5/16 16:19:14

别再只会调PWM占空比了！用STM32F103实现直流电机精准调速，从硬件选型到PID参数整定全流程复盘

从PWM到PID&#xff1a;STM32F103直流电机精准调速实战指南 第一次用STM32驱动直流电机时&#xff0c;我天真地以为只要会调PWM占空比就能搞定一切。直到亲眼看到电机在空载时转速飘忽不定&#xff0c;带载后响应迟缓得像老牛拉车&#xff0c;才明白工业级控制远非改变几个寄存…...

编程新知 2026/5/16 16:14:40