vue3数据结构的渲染01

news2024/11/15 16:46:07

处理数据:

//现有原始数据showCertificateUrl “url01;url02” 使用以下代码将两条通过分号";"分割的url进行处理
const parseUrls = () => {
  urls.value = [];// 每次重新赋值前一定要清空之前的旧数据!
  if (!showCertificateUrl.value) {
    return;
  }
  const urlArray = showCertificateUrl.value.split(';');
  urlArray.forEach(url => {
    const parts = url.split('/');
    const fileName = parts.pop(); // 获取最后一个元素作为文件名
    urls.value.push({ url, name: fileName });
  });
  console.log('urls', urls);
};

控制台打印的数据结构如下:

结构中渲染:

 <div v-for="item in urls"
             :key="item.url">
          <p>{{ item.name }}</p>
          <a :href="item.url"
             target="_blank">{{ item.url }}</a>
        </div>

渲染的效果:

注意,如果打印语句为console.log('urls', urls.value);则控制台打印的结构就是

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1961211.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[前端]解决Iframe即使设置高度100%,但还是显示滚动条scrollbar的问题

前言 好烦,你看看这两个重复的滚动条. 一个是来自iframe,另一个来自父级的div(overflow: auto;) 我已经在css中设置了iframe的height: 100%;border: none;,但无论如何还是显示出了父级的scrollbar 解决 将iframe的display: block;即可. 或者vertical-align: bottom;

安全测试与渗透测试的区别

在这个数字化时代&#xff0c;网络安全如同数字世界的守护神&#xff0c;其重要性不言而喻。而在这场没有硝烟的战争中&#xff0c;安全测试与渗透测试作为两大核心利器&#xff0c;常常被提及却又容易混淆。今天&#xff0c;就让我们揭开它们的神秘面纱&#xff0c;一探二者之…

2024.7.30 作业

1> 使用文件IO完成&#xff0c;将源文件中的所有内容进行加密&#xff08;大写转小写、小写转大写&#xff09;后写入目标文件中&#xff0c;源文件内容不变 #include <myhead.h> int main(int argc,const char *argv[]) {int fd1 -1,fd2 -1;if((fd1 open(".…

【和相同的二元子数组】python刷题记录

R2-前缀和专题 目录 前缀和哈希表 双指针 ps: 第一眼过去&#xff0c;这题应该能用双指针解出来&#xff0c;应该也能用前缀和解题。 前缀和哈希表 适用于 nums[i] 值不固定为 0 和 1 的其他情况 class Solution:def numSubarraysWithSum(self, nums: List[int], goal: i…

Vue入门记录(一)

效果 本文为实现如下前端效果的学习实践记录&#xff1a; 实践 入门的最佳实践我觉得是先去看官网&#xff0c;官网一般都会有快速入门指引。 根据官网的快速上手文档&#xff0c;构建一个新的Vue3TypeScript&#xff0c;查看新建的项目结构&#xff1a; 现在先重点关注comp…

前端科举八股文-手撕代码篇

前端科举八股文-手撕代码篇 手撕排序算法选择排序思路 冒泡排序思路 快速排序思路 手撕bind方法思路解析 手撕js的继承方案构造继承实现原理 原型继承实现原理 组合继承实现原理 寄生组合继承实现原理 手撕instanceOf实现原理 手撕new 操作符手撕防抖实现原理 手撕节流实现原理…

Java8 新特性,看这篇文章就够了

Java8 是 Java 编程语言的一个重要版本&#xff0c;于 2014 年 3 月发布。它引入了许多新的功能和改进&#xff0c;其中包括 Lambda 表达式、Stream API、新的日期/时间 API 和 Nashorn JavaScript 引擎等。 Java 8 的主要特点如下&#xff1a; Lambda 表达式&#xff1a;Lamb…

Linux进程--exec族函数

exec族函数函数的作用&#xff1a; 我们用fork函数创建新进程后&#xff0c;经常会在新进程中调用exec函数去执行另外一个程序。当进程调用exec函数时&#xff0c;该进程被完全替换为新程序。因为调用exec函数并不创建新进程&#xff0c;所以前后进程的ID并没有改变。 原文链…

电测量数据交换DLMSCOSEM组件第53部分:DLMSCOSEM应用层(下)

3.DLMS/COSEM应用层协议规范 3.1控制功能 3.1.1客户机侧功能的状态定义 图37显示了客户机侧CF的状态机。 客户机CF(和AL包含CF)的状态定义如下: ——INACTIVE:在该状态下,CF完全没有活动;它既不给AP提供服务,也不使用协议支撑层服务; ——IDLE:在没有AA存在…

SpringBoot(看这一篇就够了)

目录&#xff1a; SpringBootSpring的缺点什么是SpringBoot&#xff1f;Springboot3 版本要求Springboot的三种构建方式官网搭建通过IDEA脚手架搭建通过Maven搭建项目 SpringBoot的项目结构编写一个测试代码YAML文件自定义配置文件Value读取配置文件ConfigurationProperties读取…

阿里P8大佬推荐的前端书籍资料,限时免费领取!

&#x1f381; 限时福利大放送&#xff01; &#x1f389; 亲爱的前端小伙伴们&#xff0c;今天给大家分享几个前端必备资料 有P8大佬的算法解题笔记, 最新大厂高频100题, 前端经典八股文&#xff0c;也有一些前端经典书籍&#xff0c;如nodejs&#xff0c;http&#xff0c;jav…

ros笔记04--从零体验ros2行为通信方式

ros笔记04--从零体验ros2行为通信方式 介绍创建步骤体验官方案例基于python开发行为案例创建action接口创建action sever和client 注意事项说明 介绍 行为是ros2中的一种通信方式&#xff0c;其多被用于一些长时间运行的任务&#xff0c;它包含了目标、反馈、结果三部分。 行为…

科普文:从源码解读5种Redis基本数据类型

键值对字符串 char* 与 SDS char* 的不足&#xff1a; 操作效率低&#xff1a;获取长度需遍历&#xff0c;O(N)复杂度 二进制不安全&#xff1a;无法存储包含 \0 的数据 SDS 的优势&#xff1a; 操作效率高&#xff1a;获取长度无需遍历&#xff0c;O(1)复杂度&#xff08…

HIS系统搭建|HIS系统功能|HIS系统开发

在当今医疗信息化的浪潮中&#xff0c;医院信息系统&#xff08;HIS&#xff09;的搭建成为了提升医疗服务效率和质量的关键。HIS系统不仅仅是一个简单的数据记录工具&#xff0c;它是一个集成了预约挂号、病历管理、药品管理、财务结算等多个功能模块的综合性平台。通过这一系…

使用idea集成的springboot实现注册接口

跟黑马程序员学pringboot3vue3,代码都是黑马程序员视频里的代码 实战篇-03_注册接口_哔哩哔哩_bilibili 本文仅仅用于学习记录 开发用户接口 注册接口 开发流程&#xff1a;明确需求>>阅读接口文档>>思路分析>>开发>>测试 分析&#xff1a; 这个…

使用SDL库以及C++实现的简单的贪吃蛇:AI Fitten生成

简单使用AI代码生成器做了一个贪吃蛇游戏 设计的基本逻辑都是正确的&#xff0c;能流畅运行 免费准确率高&#xff0c;非常不错&#xff01;支持Visual Studio系列 Fitten&#xff1a;https://codewebchat.fittenlab.cn/ SDL 入门指南&#xff1a;安装配置https://blog.csdn.n…

高效数据抓取:Scrapy框架详解

一、Scrapy框架简介 Scrapy是一个为了爬取网站数据、提取结构性数据而编写的爬虫框架。它支持异步处理&#xff0c;能够快速抓取大量网页&#xff0c;并且易于扩展。Scrapy使用Twisted这个事件驱动的网络引擎&#xff0c;可以处理大量的并发请求&#xff0c;从而提高数据抓取的…

C语言分支结构作业

作业 输入你的身高和体重&#xff0c;测试你的健康状况。 计算bmi的值&#xff0c; bmi &#xff08;体重/身高的平方) 如果bmi 小于18.5&#xff0c;则显示“偏瘦&#xff0c;注意加强营养” 如果bmi 在18.5和23.9之间&#xff0c;则显示“体重指数良好&#xff0c;注意保持…

【全栈实战】大模型自学:从入门到实战打怪升级,20W字总结(二)

&#x1f60a;你好&#xff0c;我是小航&#xff0c;一个正在变秃、变强的文艺倾年。 &#x1f514;本栏讲解【全栈实战】大模型自学&#xff1a;从入门到实战打怪升级。 &#x1f514;专栏持续更新&#xff0c;适合人群&#xff1a;本科生、研究生、大模型爱好者&#xff0c;期…

基于单片机的电梯控制系统的设计

摘 要: 本文提出了一种基于单片机的电梯控制系统设计 。 设计以单片机为核心&#xff0c;通过使用和设计新型先进的硬件和控制程序来模拟和控制整个电梯的运行&#xff0c;在使用过程中具有成本低廉、 维护方便、 运行稳定 、 易于操作 、 安全系数高等优点 。 主要设计思路是…