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

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

news 2025/9/18 19:25:50

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

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/9/17 11:41:11

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2025/9/17 7:32:01

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/9/17 9:49:05

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/9/11 12:54:54

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/8/22 4:33:54

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/8/18 23:22:02

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/8/14 2:06:45

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/9/16 6:14:35

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/9/15 23:13:14

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/9/16 2:04:37