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…...
【福州市AOI小区面】shp数据学校大厦商场等占地范围面数据内容测评
AOI城区小区面样图和数据范围查看： — 字段里面有name字段。分类比较多tpye：每个值代表一个类型。比如字段type中1549代表小区住宅，1563代表学校。小区、学校等占地面积范围数据 —— 小区范围占地面积面数据shp格式 无偏移坐标，只…...
llama.cpp LLM_ARCH_DEEPSEEK and LLM_ARCH_DEEPSEEK2
llama.cpp LLM_ARCH_DEEPSEEK and LLM_ARCH_DEEPSEEK2 1. LLM_ARCH_DEEPSEEK and LLM_ARCH_DEEPSEEK22. LLM_ARCH_DEEPSEEK and LLM_ARCH_DEEPSEEK23. struct ggml_cgraph * build_deepseek() and struct ggml_cgraph * build_deepseek2()References 不宜吹捧中国大语言模型的同…...
k8s简介，k8s环境搭建
目录 K8s简介环境搭建和准备工作修改主机名（所有节点）配置静态IP（所有节点）关闭防火墙和seLinux，清除iptables规则（所有节点）关闭交换分区（所有节点）修改/etc/hosts文件&…...
2024年个人总结
序 照例，每年都有的个人年度总结来了，看了很多其他大佬的总结，感觉自己的2024过于单薄，故事也不太丰满，自己就回去比较，自己哪里做的不好 ？但后来发现已经进入了一个思维误区。 年度总结年度总结…...
【落羽的落羽 数据结构篇】顺序表
文章目录 一、线性表二、顺序表1. 概念与分类2. 准备工作3. 静态顺序表4. 动态顺序表4.1 定义顺序表结构4.2 顺序表的初始化4.3 检查空间是否足够4.3 尾部插入数据4.4 头部插入数据4.5 尾部删除数据4.6 头部删除数据4.7 在指定位置插入数据4.8 在指定位置删除数据4.9 顺序表的销…...
麒麟操作系统服务架构保姆级教程（十四）iptables防火墙四表五链和防火墙应用案例
如果你想拥有你从未拥有过的东西，那么你必须去做你从未做过的事情 防火墙在运维工作中有着不可或缺的重要性。首先，它是保障网络安全的关键防线，通过设置访问控制规则，可精准过滤非法网络流量，有效阻挡外部黑客攻击、恶…...
Linux之详谈——权限管理
目录 小 峰 编 程 编辑 一、权限概述 1、什么是权限 2、为什么要设置权限 3、Linux中的权限类别- 4、Linux中文件所有者 1）所有者分类（谁） 2）所有者的表示方法 ① u(the user who owns it)（属主权限&…...
第05章 13 椭球体张量可视化应用一则-神经束追踪
在神经束追踪（Tractography）中，椭球体张量（Ellipsoid Tensor）通常用于描述神经纤维的方向和扩散特性。这种技术广泛应用于磁共振成像（MRI）的扩散张量成像（DTI）数据中。VT…...
Celery
https://www.bilibili.com/video/BV1RGDEY5ERB 架构 简单任务 执行 包结构 本示例： app 添加任务 获取结果 配置延时任务 任务配置 beat 提交定时任务...
JavaScript系列（48）-- 3D渲染引擎实现详解
JavaScript 3D渲染引擎实现详解 🎮 今天，让我们深入探讨JavaScript的3D渲染引擎实现。通过WebGL和现代JavaScript技术，我们可以构建一个功能完整的3D渲染系统。 3D渲染基础概念 🌟 💡 小知识：3D渲染引擎的…...
Golang并发机制及CSP并发模型
Golang 并发机制及 CSP 并发模型 Golang 是一门为并发而生的语言，其并发机制基于 CSP（Communicating Sequential Processes，通信顺序过程） 模型。CSP 是一种描述并发系统中交互模式的正式语言，强调通过通信来共享内存…...
使用 Docker + Nginx + Certbot 实现自动化管理 SSL 证书
使用 Docker Nginx Certbot 实现自动化管理 SSL 证书 在互联网安全环境日益重要的今天，为站点或应用部署 HTTPS 已经成为一种常态。然而，手动申请并续期证书既繁琐又容易出错。本文将以 Nginx Certbot 为示例，基于 Docker 容器来搭建一个…...
游戏策划的分类
P3游戏策划分类 1.程序2.美术3.策划 程序：一般分为客户端程序和服务器程序 客户端程序一般负责游戏的前端画面表现 服务器程序负责游戏的后端运算 美术：角色原画，角色模型动作，场景原画，场景模型，UI设计&a…...
Edge-TTS在广电系统中的语音合成技术的创新应用
Edge-TTS在广电系统中的语音合成技术的创新应用 作者：本人是一名县级融媒体中心的工程师，多年来一直坚持学习、提升自己。喜欢Python编程、人工智能、网络安全等多领域的技术。 摘要 随着人工智能技术的快速发展，文字转语音（Te…...
函数实现图像按位取反运算)
python学opencv|读取图像（四十七）使用cv2.bitwise_not()函数实现图像按位取反运算
【0】基础定义 按位与运算：两个等长度二进制数上下对齐，全1取1，其余取0。按位或运算：两个等长度二进制数上下对齐，有1取1，其余取0。 按位取反运算：一个二进制数，0变1,1变0。 【1】…...
一文讲解Java中Object类常用的方法
在Java中，经常提到一个词“万物皆对象”，其中的“万物”指的是Java中的所有类，而这些类都是Object类的子类； Object主要提供了11个方法，大致可以分为六类： 对象比较： public native int has…...
)
【算法篇·更新中】C++秒入门(附练习用题目)
一.二分 1.二分查找 我们来看这样一道题： 有一个保证有序的数组a，它的长度为n。现在我们需要知道这个序列是否含有x。 数据范围：保证n<1e9 我们看到这道题之后，第一时间想到的就是暴力枚举了，可是我们发现直接枚举…...
面向对象编程 vs 面向过程编程
面向对象编程 vs 面向过程编程：深入解析这两种编程范式的区别 在当今软件开发领域，编程范式的选择对于项目的可维护性和可扩展性至关重要。面向对象编程（OOP）和面向过程编程（POP）是两种根本的编程思想。本…...
【Rust自学】16.2. 使用消息传递来跨线程传递数据
喜欢的话别忘了点赞、收藏加关注哦（加关注即可阅读全文），对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 16.2.1. 消息传递 有一种很流行而且能保证安全并发的技术（或者叫机制ÿ…...
【四川乡镇界面】图层shp格式arcgis数据乡镇名称和编码2020年wgs84无偏移内容测评
本文将详细解析标题和描述中提到的IT知识点，主要涉及GIS（Geographic Information System，地理信息系统）技术，以及与之相关的文件格式和坐标系统。 我们要了解的是"shp"格式，这是一种广泛用于存储…...
人物传记之新月篇
相关故事链接（及时更新）：Python的那些事第四篇：编程中的智慧之光控制结构-CSDN博客 Python的那些事第五篇：数据结构的艺术与应用-CSDN博客 目录 1. C语言程序：增强版加密与解密工具 2. Python程序&#x…...
TypeScript中的函数：类型安全与高级特性
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...
DDD 和 TDD
领域驱动设计（DDD） DDD 是一种软件开发方法，强调通过与领域专家的密切合作来构建一个反映业务逻辑的模型。其核心思想是将业务逻辑和技术实现紧密结合，以便更好地解决复杂的业务问题。 DDD 的关键概念： 1. 领域模型 …...
【C语言分支与循环结构详解】
目录 ---------------------------------------begin--------------------------------------- 一、分支结构 1. if语句 2. switch语句 二、循环结构 1. for循环 2. while循环 3. do-while循环 三、嵌套结构 结语 -----------------------------------------end----…...
FaceFusion
文章目录 一、关于 FaceFusion预览 二、安装三、用法 一、关于 FaceFusion FaceFusion 是行业领先的人脸操作平台 github : https://github.com/facefusion/facefusion官方文档：https://docs.facefusion.io/Discord : https://discord.com/invite/facefusion-1141…...
图论——单源最短路的扩展应用
acwing1137.选择最佳路线 本题有两个解决思路 1.建立虚拟源点，连接虚拟源点和 w w w个可作为起点的点，边权为0，这样只需要从虚拟源点开始做一遍最短路算法便可。 2.反向建边，把所有的add(a,b,c)变成add(b,a,c)，这样只…...
Linux shell脚本笔记-One
前言 本文主要汇总有关shell脚本常用的知识点，有时候使用忘记某些用法指令，特此汇总方便后续查阅。 一.shell脚本编写的头部定义: 定义的shell脚本头部有多种写法，具体根基实际系统结构处理，如下: #!/bin/sh ÿ…...
【C语言----函数详解】
目录 ----------------------------------------begin-------------------------------------- 引言 一、函数是什么 二、函数的定义和声明 1. 函数的定义 2. 函数的声明 三、函数的调用 四、函数参数传递 五、函数的返回值 六、递归函数 七、函数指针 八、总结 ---…...
QT交叉编译环境搭建（Cmake和qmake）
介绍一共有两种方法（基于qmake和cmake）： 1.直接调用虚拟机中的交叉编译工具编译 2.在QT中新建编译套件kits camke和qmake的区别：CMake 和 qmake 都是自动化构建工具，用于简化构建过程，管理编译设置&…...
Zemax 中的屋脊棱镜建模
光学棱镜是一种透明的光学元件，其表面平坦且抛光，可以折射光线。最常见的棱镜类型是三棱镜，它有两个三角形底座和三个矩形或略呈梯形的表面。棱镜通常由玻璃或丙烯酸等材料制成。当光线以一定角度进入棱镜时，它会在穿过棱镜时发生…...
CUDA学习-内存访问
一 访存合并 1.1 说明 本部分内容主要参考： 搞懂 CUDA Shared Memory 上的 bank conflicts 和向量化指令（LDS.128 / float4）的访存特点 - 知乎 1.2 share memory结构 图1.1 share memory结构 放在 shared memory 中的数据是以 4 bytes（即 32 bits）作为 1 个 word，依…...
Nginx 开发总结
文章目录 1. Nginx 基础概念1-1、什么是 Nginx1-2、Nginx 的工作原理1-3、Nginx 的核心特点1-4、Nginx 的常见应用场景1-5、Nginx 与 Apache 的区别1-6、 Nginx 配置的基本结构1-7、Nginx 常见指令 2. Nginx 配置基础2-1、Nginx 配置文件结构2-2、全局配置 (Global Block)2-3、…...
)
目标跟踪之sort算法(3)
这里写目录标题 1 流程1 预处理2 跟踪 2 代码 参考：sort代码 https://github.com/abewley/sort 1 流程 1 预处理 1.1 获取离线检测数据。1.2 实例化跟踪器。2 跟踪 2.1 轨迹处理。根据上一帧的轨迹预测当前帧的轨迹，剔除到当前轨迹中为空的轨迹得到当前…...
C++/stack_queue
目录 1.stack 1.1stack的介绍 1.2stack的使用 练习题： 1.3stack的模拟实现 2.queue的介绍和使用 2.1queue的介绍 2.2queue的使用 2.3queue的模拟实现 3.priority_queue的介绍和使用 3.1priority_queue的介绍 3.2priority_queue的使用 欢迎 1.stack 1.1stack…...
小程序电商运营内容真实性增强策略及开源链动2+1模式AI智能名片S2B2C商城系统源码的应用探索
摘要：随着互联网技术的不断发展，小程序电商已成为现代商业的重要组成部分。然而，如何在竞争激烈的市场中增强小程序内容的真实性，提高用户信任度，成为电商运营者面临的一大挑战。本文首先探讨了通过图片、视频等方式增…...
「Unity3D」在Unity中使用C#控制显示Android的状态栏
Unity打包的Android默认都是全屏，如果想要在真机上显示状态栏，就需要额外设置，有两种方式： 第一种，使用Android的Java代码去控制，然后以插件的方式放到Unity中，被C#调用。第二种，使…...
、LCD1602、DS1302、独立按键的WiFi时钟)
基于51单片机和ESP8266(01S)、LCD1602、DS1302、独立按键的WiFi时钟
目录 系列文章目录前言一、效果展示二、原理分析三、各模块代码1、延时2、定时器03、串口通信4、DS13025、LCD16026、独立按键 四、主函数总结 系列文章目录 前言 之前做了一个WiFi定时器时钟，用八位数码管进行显示，但是定时器时钟的精度较低࿰…...
AI 浪潮席卷中国年，开启科技新春新纪元
在这博主提前祝大家蛇年快乐呀！！！ 随着人工智能（AI）技术的飞速发展，其影响力已经渗透到社会生活的方方面面。在中国传统节日 —— 春节期间，AI 技术也展现出了巨大的潜力，为中国年带…...
STM32 LED呼吸灯
接线图： 这里将正极接到PA0引脚上，负极接到GND，这样就高电平点亮LED，低电平熄灭。 占空比越大，LED越亮，占空比越小，LED越暗 PWM初始化配置 输出比较函数介绍： 用这四个函数配置输…...
机器学习day4
自定义数据集 使用pytorch框架实现逻辑回归并保存模型，然后保存模型后再加载模型进行预测 import numpy as np import torch import torch.nn as nn import torch.optim as optimizer import matplotlib.pyplot as pltclass1_points np.array([[2.1, 1.8],[1.9, 2…...
《哈佛家训》
《哈佛家训》是一本以教育为主题的书籍，旨在通过一系列富有哲理的故事和案例，传递积极的人生观、价值观和教育理念。虽然它并非直接由哈佛大学官方出版，但其内容深受读者喜爱，尤其是在家庭教育和个人成长领域。 以下是《哈佛家训…...
为什么redis会开小差？Redis 频繁异常的深度剖析与解决方案
文章目录 导读为什么redis会开小差？1.连接数过多2.bigkey3.慢命令操作4.内存策略不合理5.外部数据双写一致性6.保护机制未开启7. 数据集中过期8. CPU饱和9. 持久化阻塞10. 网络问题结论 导读 提起分布式缓存，想必大多数同学脑海中都会浮出redis这个名字…...
window中80端口被占用问题
1，查看报错信息 可以看到在启动项目的时候，8081端口被占用了，导致项目无法启动。 2，查看被占用端口的pid #语法 netstat -aon|findstr :被占用端口#示例 netstat -aon|findstr :8080 3，杀死进程 #语法 taikkill /pid…...
＜ OS 有关 ＞ 阿里云：轻量应用服务器 的使用 ：轻量化 阿里云 vpm 主机
原因： ＜ OS 有关 ＞ 阿里云：轻量应用服务器 的使用 ：从新开始 配置 SSH 主机名 DNS Tailscale 更新OS安装包 最主要是 清除阿里云客户端这个性能杀手-CSDN博客 防止 I/O 祸害系统 操作： 查看进程&#x…...
解决报错“The layer xxx has never been called and thus has no defined input shape”
解决报错“The layer xxx has never been called and thus has no defined input shape”(这里写自定义目录标题) 报错显示 最近在跑yolo的代码时遇到这样一个错误，显示“the layer {self.name} has never been called”.这个程序闲置了很久，每次一遇到…...
Microsoft Visual Studio 2022 主题修改（补充）
Microsoft Visual Studio 2022 透明背景修改这方面已经有很多佬介绍过了，今天闲来无事就补充几点细节。 具体的修改可以参考：Microsoft Visual Studio 2022 透明背景修改（快捷方法）_material studio怎么把背景弄成透明-CSDN博客文…...
PyCharm接入DeepSeek实现AI编程
目录 效果演示 创建API key 在PyCharm中下载CodeGPT插件 配置Continue DeepSeek 是一家专注于人工智能技术研发的公司，致力于开发高性能、低成本的 AI 模型。DeepSeek-V3 是 DeepSeek 公司推出的最新一代 AI 模型。其前身是 DeepSeek-V2.5，经过持续的…...
C++ 包装器与绑定器的应用之回调函数的实现
回调函数的实现 在消息队列和网络库的框架中，当接收到消息（报文）时，回调用户自定义的函数对象，把消息（报文）参数传给它，由它决定如何处理。 queue参考文章:C queue(STL queue&…...
一文读懂DeepSeek-R1论文
目录 论文总结 摘要 1. 引言 1.1. 贡献 1.2. 评估结果总结 2. 方法 2.1. 概述 2.2. DeepSeek-R1-Zero：在基础模型上进行强化学习 2.2.1. 强化学习算法 2.2.2. 奖励建模 2.2.3. 训练模板 2.2.4. DeepSeek-R1-Zero 的性能、自我进化过程和顿悟时刻 2.3. …...