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

vue记事本渲染以及交互

news 2026/5/13 0:55:37

以下是记事本的源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>记事本</title><style>
/* 标题 */
h1{margin-top: 130px;color: red;font-size: 29px;
}/* 按钮 */
button {/* 去掉黑圈 */margin: 0;padding: 0;border: 0;background: none;
}
/* 主体 */
body {line-height: 1.4em;background: #f5f5f5;color: #4d4d4d;min-width: 260px;max-width: 600px;margin: 0 auto;font-weight: 300;
}
/* 输入框 */
.new-todo{position: relative;margin: 0;width: 100%;font-size: 24px;
}
/* 列表渲染 */
.todo-list li {position: relative;font-size: 24px;height: 60px;box-sizing: border-box;border-bottom: 1px solid #e6e6e6;
}
/* 列表渲染 */
.todo-list li {word-break: break-all;padding: 15px 15px 15px 60px;display: block;line-height: 1.2;transition: color 0.4s;
}
/* 删除按键 */
.todo-list li .destroy {display: none;position: absolute;top: 0;right: 10px;bottom: 0;width: 10px;height: 10px;font-size: 30px;color: black;margin-bottom: 11px;
}
/* 删除按键 */
.todo-list li .destroy:after {content: 'x';
}
/* 显示删除 */
.todo-list li:hover .destroy {display: block;
}
/* 删除 */
.clear-completed {float: right;position: relative;line-height: 20px;text-decoration: none;cursor: pointer;
}</style>
</head>
<body><!-- 容器 -->
<section id="todoapp" boder="1"><!-- 头部输入框 --><header class="header"><h1>小黑记事本</h1><input v-model="inputValue" v-on:keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"class="new-todo" /></header><!-- 列表区域 -->
<section class="main"><ul class="todo-list"><li class="todo" v-for="(item, index) in list"><div class="view"><span class="index">{{ index + 1 }}.</span><label>{{ item }}</label><button @click="remove(index)" class="destroy"></button></div></li></ul>
</section><!-- 统计和清空 --><footer class="footer"><!-- <span v-if="list.length" class="todo-count"><strong>{{ list.length }}</strong></span> --><button v-show="list.length" v-on:click="clear" class="clear-completed">全删</button></footer>
</section></body>
<script src="D:\technology\Technology\vue.js\vue.js"></script>
<script>
// 创建 Vue 实例
let vm = new Vue({el:"#todoapp",data:{list: ["俯卧撑", "跑步", "游泳"],},methods:{     add:function(){let data = this.inputValue.trim()if (data != "")this.list.push(this.inputValue);elseconsole.log("null");},remove: function (index){console.log("remove", index);this.list.splice(index, 1);},// +clear: function (){this.list = [];}}
})</script></html>

相关文章：

vue记事本渲染以及交互

以下是记事本的源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>记事本</title><styl…...

编程日记 2024/4/2 6:25:49

Zookeeper中的脑裂

简单点来说&#xff0c;脑裂(Split-Brain) 就是比如当你的 cluster 里面有两个节点&#xff0c;它们都知道在这个cluster 里需要选举出一个 master。那么当它们两个之间的通信完全没有问题的时候&#xff0c;就会达成共识&#xff0c;选出其中一个作为 master。但是如果它们之间…...

编程日记 2024/4/2 6:24:48

【漏洞复现】金和OA XmlDeal.aspx XXE漏洞

0x01 产品简介 金和数字化智能办公平台（简称JC6）是一款结合了人工智能技术的数字化办公平台，为企业带来了智能化的办公体验和全面的数字化转型支持。同时符合国家信创认证标准，支持组织数字化转型，实现业务流程的数字化、智能化和协同化，提高企业竞争力。 0x02 漏洞概述…...

编程日记 2024/4/2 6:22:46

对比：React 还是 Vue

自己之前的开发栈一直是 Vue&#xff0c;对 Vue 的设计理念及底层实现原理算是颇有了解&#xff1b;随着公司技术迭代&#xff0c;近半年来开始接触&使用 React。 前面写了几篇关于 React 的文章&#xff0c;但大部分都是知识点以及开发过程问题的沉淀总结。 这篇文章想尝…...

编程日记 2024/4/2 6:21:45

ubuntu 20.04 SD 卡分区类型 msdos 改为 GPT 的方法

前言 默认 SD 卡分区是 FAT32 格式&#xff0c;为了用于嵌入式Linux ext4 文件系统&#xff0c;需要改为 ext4 文件系统&#xff0c;但是SD 卡分区类型默认是 msdos 类型&#xff0c;也就是 MBR 类型&#xff0c;不是 GPT 类型。 烧写 ext4 分区表&#xff0c;或者使用 ubuntu…...

编程日记 2024/4/2 6:20:43

Kubernetes（K8s）技术解析

1. K8s简介 Kubernetes&#xff08;简称K8s&#xff09;是一个开源的容器编排平台&#xff0c;旨在简化容器化应用程序的部署、扩展和管理。为开发者和运维人员提供了丰富的功能和灵活的解决方案&#xff0c;帮助他们更轻松地构建、部署和管理云原生应用程序。以下是关于Kubern…...

编程日记 2024/4/2 6:18:41

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之十 简单颜色反转效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之十 简单颜色反转效果 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之十 简单颜色反转效果 一、简单介绍 二、简单颜色反转效果实现原理 三、简单颜色反转效果案例实现简单步骤 四、注…...

编程日记 2024/4/2 6:17:40

【ELK+Kafka+filebeat分布式日志收集】部署filebeat和Kibana（三）

filebeat下载 官网：https://www.elastic.co/cn/downloads/beats/filebeat 或者 cd /opt wget https://artifacts.elastic.co/downloads/beats/filebeat/filebeat-8.8.1-linux-x86_64.tar.gz依次执行如下命令...

编程日记 2024/4/2 6:16:39

二.音视频编辑-媒体组合-播放

引言 当涉及到音视频编辑时&#xff0c;媒体资源的提取和组合是至关重要的环节。在iOS平台上&#xff0c;AVFoundation框架提供了丰富而强大的功能&#xff0c;使得媒体资源的操作变得轻松而高效。从原始的媒体中提取片段&#xff0c;然后将它们巧妙地组合成一个完整的作品&am…...

编程日记 2024/4/2 6:14:38

前端安全-面试题（2024）

1. 面试总结话术： 前端常见的安全问题主要包括以下几种： 跨站脚本攻击（XSS）：攻击者通过在目标网站注入恶意脚本，当用户访问网站时，恶意脚本会被执行，从而窃取用户信息或进行其他恶意操作。这种攻击通常利用表单提交、URL参数等方式注入脚本。存储型 xss 恶意代码存在数…...

编程日记 2024/4/2 6:12:36

CVE-2022-29405 Apache Archiva任意用户密码重置漏洞分析

Apache Archiva是一套可扩展的Artifact Repository管理系统。它能够与Maven&#xff0c;Continuum和ANT等构建工具完美结合。Archiva提供的功能包括&#xff1a;远程Repository代理&#xff0c;基于角色的安全访问管理&#xff0c;Artifact分发、维护、查询&#xff0c;生成使用…...

编程日记 2024/4/2 6:11:34

ssm框架配置文件例子

emmm。。。。 就是说&#xff0c;正常ssm的配置文件长啥样&#xff1f; 就最基础的&#xff1f; 贴一下&#xff0c;备忘吧。 第一个&#xff1a;applicationContext.xml <beans xmlns"http://www.springframework.org/schema/beans"xmlns:context"http…...

编程日记 2024/4/2 6:10:32

maven构建项目报错:Failure to find com.microsoft.sqlserver:sqljdbc4:jar:4.0 in

背景 今天在项目里面查询sqlserver的数据库的时候&#xff0c;本地maven中引入依赖&#xff1a; <dependency><groupId>com.microsoft.sqlserver</groupId><artifactId>sqljdbc4</artifactId><version>4.0</version></dependenc…...

编程日记 2024/4/2 6:09:31

已解决rabbitmq AMQPConnectionClosedException：管道破裂或连接关闭异常的正确解决方法，亲测有效！！！

已解决rabbitmq AMQPConnectionClosedException&#xff1a;管道破裂或连接关闭异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 一、问题分析 二、报错原因 三、解决思路 四、解决方法 五、总结 博主v&#xff1a;XiaoMing_Java 一、…...

编程日记 2024/4/2 6:08:30

Excel 隔几行批量插入空白行

例如如下表格&#xff0c;每隔6行插入一行数据&#xff1a; 1&#xff09;第7个单元格输入1 2&#xff09;选中6个单元格&#xff0c;然后双击填充数据&#xff1a; 3&#xff09;F5 找到常量 Ctrlshift 复制插入的数据&#xff0c;然后选中数据 按F5&#xff0c;定位到空值...

编程日记 2024/4/2 6:07:29

2024年04月在线IDE流行度最新排名

点击查看最新在线IDE流行度最新排名&#xff08;每月更新&#xff09; 2024年04月在线IDE流行度最新排名 TOP 在线IDE排名是通过分析在线ide名称在谷歌上被搜索的频率而创建的 在线IDE被搜索的次数越多&#xff0c;人们就会认为它越受欢迎。原始数据来自谷歌Trends 如果您相…...

编程日记 2024/4/2 6:06:28

如何通过Elasticsearch实现搜索的关键词达到高亮的效果

高亮 首先介绍一下什么是搜索的关键词达到高亮的效果&#xff0c;如图所示 当在百度里面搜索elasticsearch的时候&#xff0c;可以看到出现的搜索结果里面elasticsearch这个关键词明显与其他的条文不一样&#xff0c;用红颜色凸显了“高亮效果”。当我们想要在自己的项目里面…...

编程日记 2024/4/2 6:02:24

真实sql注入以及小xss--BurpSuite联动sqlmap篇

前几天漏洞检测的时候无意发现一个sql注入 首先我先去网站的robots.txt去看了看无意间发现很多资产 而我意外发现admin就是后台 之后我通过基础的万能账号密码测试or ‘1‘’1也根本没有效果 而当我注入列的时候情况出现了 出现了报错&#xff0c;有报错必有注入点 因此我…...

编程日记 2024/4/2 6:01:23

Java类和对象练习题

练习一 下面代码的运行结果是&#xff08;&#xff09; public static void main(String[] args){String s;System.out.println("s"s);} 解析&#xff1a;本题中的代码不能编译通过&#xff0c;因为在Java当中局部变量必须先初始化&#xff0c;后使用。所以此处编译不…...

编程日记 2024/4/2 6:00:21

Qt 实现简易的视频播放器，功能选择视频，播放，暂停，前进，后退，进度条拖拉，视频时长显示

1.效果图 2.代码实现 2.1 .pro文件 QT core gui multimedia multimediawidgets 2.2 .h文件 #ifndef VIDEOPLAYING_H #define VIDEOPLAYING_H#include <QWidget> #include<QFileDialog>#include<QMediaPlayer> #include<QMediaRecorder> #in…...

编程日记 2024/4/2 5:59:21

5步解决网易云音乐NCM文件难题：ncmdumpGUI实战指南

5步解决网易云音乐NCM文件难题&#xff1a;ncmdumpGUI实战指南 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾经遇到过这样的情况&#xff1a;在网易…...

编程新知 2026/5/13 0:46:56

三步高效配置：快速实现百度网盘直链下载的完整指南

三步高效配置&#xff1a;快速实现百度网盘直链下载的完整指南 【免费下载链接】baiduyun 油猴脚本 - 一个免费开源的网盘下载助手 项目地址: https://gitcode.com/gh_mirrors/ba/baiduyun 你是否还在为百度网盘下载速度缓慢而烦恼&#xff1f;是否厌倦了客户端限速的困…...

编程新知 2026/5/13 0:46:56

工程师视角：最低成本脱碳路径与气候解决方案的工程化思维

1. 项目概述&#xff1a;一封关于气候与经济的公开信最近在EE Times上读到一封写给埃隆马斯克的公开信&#xff0c;作者格伦温瑞布提出了一些关于气候变化和联邦预算赤字的想法&#xff0c;挺有意思的。这封信的核心不是空谈环保理念&#xff0c;而是从一个工程师和务实主义者的…...

编程新知 2026/5/12 22:18:05

拾亩绿光纯亚麻籽微粉效果怎么样

很多人想通过亚麻籽补充营养&#xff0c;却常遇到传统亚麻籽难吸收、营养易流失的问题&#xff1a;直接嚼咽口感粗糙&#xff0c;普通研磨粉冲调结块&#xff0c;榨油后Omega-3等核心营养大量损耗。拾亩绿光纯亚麻籽微粉依托南京国英健康科技有限公司的专利技术&#xff0c;可解…...

编程新知 2026/5/12 21:24:30

爆单实操课：从3C到美妆，跨境商家如何用AI神器搞定TikTok本土化

每天都有无数跨境卖家在各大社群里发问&#xff1a;怎么用ai生成带货视频&#xff0c;有哪些工具比较好用&#xff1f; 在 TikTok 这个极度依赖内容爆发的平台上&#xff0c;不同类目的产品对视频素材的需求千差万别。靠人工剪辑不仅效率低&#xff0c;且极难跨越本土化语言的障…...

编程新知 2026/5/12 21:24:30

2026年搜索引擎大变革：生成式优化服务如何引领未来趋势

随着AI技术的不断进步&#xff0c;搜索引擎领域正在经历一场前所未有的变革。2026年&#xff0c;我们见证了从传统SEO到生成式引擎优化&#xff08;GEO&#xff09;的重大转变。这场变革不仅改变了用户获取信息的方式&#xff0c;也为企业带来了全新的营销机遇。本文将深入探讨…...

编程新知 2026/5/12 20:46:38

法律AI助手weclaw：基于RAG与领域大模型的智能法律应用实践

1. 项目概述&#xff1a;一个面向法律领域的智能助手 最近在关注一些开源项目&#xff0c;发现了一个挺有意思的&#xff0c;叫 shp-ai/weclaw 。光看这个名字&#xff0c;就能猜个八九不离十——“weclaw”&#xff0c;听起来像是“we”和“law”的结合&#xff0c;指向性非…...

编程新知 2026/5/12 20:41:26

告别AT指令恐惧症：用ESP-01S和51单片机，5分钟搞定手机远程开关灯

从零到一的智能家居初体验&#xff1a;ESP-01S与51单片机极简联动方案 第一次接触物联网硬件开发时&#xff0c;那些密密麻麻的AT指令确实容易让人望而生畏。但当我真正用ESP-01S模块配合最基础的51单片机&#xff0c;在五分钟内实现了手机远程开关LED灯的那一刻&#xff0c;所…...

编程新知 2026/5/12 19:59:01

开源语言模型项目实践：从Transformer核心到训练调优全解析

1. 项目概述&#xff1a;一个开源语言模型的实践与探索最近在GitHub上看到一个名为“angeluriot/Language_model”的项目&#xff0c;点进去一看&#xff0c;是个挺有意思的语言模型实现。虽然项目标题很简单&#xff0c;但内容却涵盖了从数据处理、模型构建到训练推理的完整链…...

编程新知 2026/5/12 18:50:17

如何用GHelper解决华硕笔记本性能管理难题：轻量级开源工具的完整指南

如何用GHelper解决华硕笔记本性能管理难题&#xff1a;轻量级开源工具的完整指南 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops with nearly the same functionality. Works with ROG Zephyrus, Flow, TUF, Strix, Scar, ProArt, Vivoboo…...

编程新知 2026/5/12 17:10:46