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

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

news 2026/3/31 15:27:04

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

学术写作“变形记”：书匠策AI如何让课程论文从“青铜”变“王者”——解锁AI时代论文写作新姿势

论文写作&#xff0c;曾是无数学生的“噩梦”&#xff1a;选题撞车、文献堆积如山、逻辑混乱如麻、格式调整让人抓狂……如今&#xff0c;随着人工智能技术的爆发&#xff0c;学术写作的“游戏规则”正在被彻底改写。书匠策AI&#xff08;官网&#xff1a;www.shujiangce.com&a…...

编程新知 2026/3/31 14:50:13

博德之门3 Mod管理器：解决Mod加载顺序被重置的终极指南 [特殊字符]

博德之门3 Mod管理器&#xff1a;解决Mod加载顺序被重置的终极指南 &#x1f3ae; 【免费下载链接】BG3ModManager A mod manager for Baldurs Gate 3. 项目地址: https://gitcode.com/gh_mirrors/bg/BG3ModManager 如果你在使用BG3ModManager&#xff08;博德之门3模组…...

编程新知 2026/3/31 13:28:54

手把手教你用DuckDB 1.3.0的DuckLake功能搭建数据湖（PostgreSQL+MinIO实战）

实战指南&#xff1a;基于DuckDB 1.3.0与MinIO构建企业级数据湖架构 在数据驱动的时代&#xff0c;企业需要更灵活、高效的解决方案来管理海量数据。DuckDB 1.3.0推出的DuckLake功能&#xff0c;结合PostgreSQL的元数据管理能力和MinIO的对象存储优势&#xff0c;为中小型企业…...

编程新知 2026/3/31 12:25:47

从零到一：深度解析BertTokenizer.from_pretrained的加载机制与实战技巧

1. 初识BertTokenizer.from_pretrained&#xff1a;你的NLP敲门砖 第一次接触Hugging Face的Transformers库时&#xff0c;我被BertTokenizer.from_pretrained()这个方法深深吸引了。它就像是一把万能钥匙&#xff0c;能快速打开各种预训练语言模型的大门。记得当时我尝试用传统…...

编程新知 2026/3/31 11:45:20

[特殊字符] Nano-Banana部署教程：Ubuntu/CentOS环境下的镜像拉取与启动

Nano-Banana部署教程&#xff1a;Ubuntu/CentOS环境下的镜像拉取与启动 1. 项目简介 Nano-Banana是一款专门为产品拆解和平铺展示风格设计的轻量级文本生成图像系统。这个项目的核心在于深度融合了Nano-Banana专属的Turbo LoRA微调权重&#xff0c;专门针对Knolling平铺、爆炸…...

编程新知 2026/3/31 11:21:11

Electron + Vue 3 + Vite 桌面应用开发：从零到打包的实战指南

1. 为什么选择Electron Vue 3 Vite组合 如果你正在寻找一种既能快速开发又能保证性能的桌面应用解决方案&#xff0c;Electron Vue 3 Vite的组合绝对值得考虑。这个组合最大的优势在于开发体验的提升&#xff0c;特别是对于那些已经熟悉Vue生态的开发者来说。 Vite带来的开…...

编程新知 2026/3/31 11:09:08

基于大数据技术的产品评价分析系统设计与实现

前言本研究聚焦于设计与实现一种基于大数据技术的产品评价分析系统&#xff0c;通过构建多层架构体系与融合多元技术方法&#xff0c;为企业决策提供智能化支撑。 研究采用分层架构设计理念&#xff0c;将系统划分为数据采集、存储、处理、分析与展示五大模块。数据采集层综合运…...

编程新知 2026/3/31 10:36:51

RVC与FunASR联动：中文语音识别+AI翻唱端到端流水线

RVC与FunASR联动&#xff1a;中文语音识别AI翻唱端到端流水线 1. 引言&#xff1a;当AI翻唱遇见语音识别 想象一下这个场景&#xff1a;你有一段喜欢的歌曲音频&#xff0c;想用自己的声音翻唱它&#xff0c;但苦于记不住歌词&#xff0c;或者原唱语速太快跟不上。传统的做法…...

编程新知 2026/3/31 9:11:56

从零搭建无人船：两年实战后，我总结的ArduPilot+Pixhawk避坑全流程

从零搭建无人船&#xff1a;两年实战后&#xff0c;我总结的ArduPilotPixhawk避坑全流程 第一次把无人船放进水里时&#xff0c;GPS信号突然丢失&#xff0c;船体在河中央失控打转——这个惊心动魄的瞬间让我意识到&#xff0c;开源飞控的实战应用远不是下载代码、连接硬件那么…...

编程新知 2026/3/31 8:59:52

Wan2.2-I2V-A14B部署教程：解决OOM/驱动报错/端口冲突三大常见问题

Wan2.2-I2V-A14B部署教程&#xff1a;解决OOM/驱动报错/端口冲突三大常见问题 1. 镜像概述与核心优势 Wan2.2-I2V-A14B是一款专为文生视频任务优化的私有部署镜像&#xff0c;特别针对RTX 4090D 24GB显存配置进行了深度优化。这个镜像最大的特点是解决了AI视频生成领域常见的…...

编程新知 2026/3/31 8:35:43