vue3数据结构的渲染01

处理数据:

//现有原始数据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.rhkb.cn/news/386660.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数模打怪(八)之图论模型

一、作图 图的数学语言描述&#xff1a; G( V(G), E(G) )&#xff0c;G&#xff08;graph&#xff09;&#xff1a;图&#xff0c;V&#xff08;vertex&#xff09;&#xff1a;顶点集&#xff0c;E&#xff08;edge&#xff09;&#xff1a;边集 1、在线作图 https://csac…

自闭症儿童能否上学:家长的选择与困惑

在自闭症儿童的成长旅程中&#xff0c;上学这一关键议题常常使家长陷入异常艰难的抉择和无尽的困惑之中。对于自闭症儿童究竟能否上学&#xff0c;家长们不得不面对众多纷繁复杂且至关重要的考量因素。 一方面&#xff0c;家长们怀揣着美好的期望&#xff0c;渴望孩子能够融入正…

C# 使用pythonnet 迁入 python 初始化错误解决办法

pythonnet 从 3.0 版本开始&#xff0c;必须设置Runtime.PythonDLL属性或环境变量 例如&#xff1a; string pathToVirtualEnv ".\\envs\\pythonnetTest"; Runtime.PythonDLL Path.Combine(pathToVirtualEnv, "python39.dll"); PythonEngine.PythonHom…

知识图谱增强的RAG(KG-RAG)详细解析

转自&#xff1a;知识图谱科技 这是一个与任务无关的框架&#xff0c;它将知识图谱&#xff08;KG&#xff09;的显性知识与大型语言模型&#xff08;LLM&#xff09;的隐含知识结合起来。这是该工作的arXiv预印本 https://arxiv.org/abs/2311.17330 。 我们在这里利用一个名为…

linux中mysql的安装使用(普通版版本+docker版本)

linux中mysql的安装使用 一、普通安装1.下载安装包2.流程 二、用docker安装1.拉取mysql镜像2.启动镜像3.开启权限第一种情况第二种情况 三、用Navicat连接 一、普通安装 1.下载安装包 挑选个你喜欢的目录&#xff0c;用wget下载并且解压 wget http://dev.mysql.com/get/Down…

Java人力资源招聘社会校招类型招聘系统PC端

&#x1f50d;【揭秘】人力资源新利器&#xff01;社会校招一站式PC端招聘系统全攻略&#x1f680; &#x1f308; 开篇引言&#xff1a;招聘新纪元&#xff0c;效率为王&#xff01; Hey小伙伴们&#xff0c;你是否还在为繁琐的招聘流程头疼不已&#xff1f;&#x1f92f; 面…

京东商品详情API:多规格商品的返回值处理

处理京东商品详情API中关于多规格商品的返回值&#xff0c;首先需要了解京东API的返回数据结构。通常&#xff0c;对于多规格商品&#xff08;如不同颜色、尺寸等选项的商品&#xff09;&#xff0c;API会返回一个包含多个规格选项和对应价格、库存等信息的复杂数据结构。 以下…

【“微软蓝屏”事件暴露了网络安全哪些问题?】建设安全稳固的网络基础设施

目录 前言一、软件更新流程中的风险管理和质量控制机制&#xff08;一&#xff09;测试流程及风险识别&#xff08;二&#xff09;风险管理策略&#xff08;三&#xff09;质量控制措施 二、预防类似大规模故障的最佳方案或应急响应对策&#xff08;一&#xff09;冗余系统设计…

.NET 一款获取主流浏览器存储密码的工具

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…

【解决方案】华普微基于CMT2150A自发电无线遥控解决方案

一、方案概述 自发电无线遥控设备的概念是指设备自身能够通过能量收集技术&#xff0c;如太阳能、动能收集或其他可再生能源&#xff0c;产生所需的电能来供电&#xff0c;而无需更换电池或外部电源。这种技术的应用可以减少对电池的依赖&#xff0c;降低对环境的影响&#xf…

github好用工具分享——lux:一键获取视频指令

我们在学习工作中需要大量的数据信息&#xff0c;然而这些数据有什么获取很麻烦&#xff0c;尤其是视频下载资源&#xff0c;那么有没有一种工具即简单方便又实用呢&#xff1f; 接下来我会向大家介绍lux工具的使用&#xff0c;lux是非常方便的获取视频资源指令&#xff0c;只需…

前端拥抱AI:LangChain.js 入门遇山开路之PromptTemplate

PromptTemplate是什么 PromptTemplate是一个可重复使用的模板&#xff0c;用于生成引导模型生成特定输出的文本。与Prompt的区别: PromptTemplate相对于普通Prompt的优势&#xff0c;即其灵活性和可定制性。 简单了解PromptTemplate后&#xff0c;咱们就来聊聊LangChain里的P…

C语言——运算符及表达式

C语言——运算符及表达式 运算符运算符的分类&#xff08;自增运算符&#xff09;、--&#xff08;自减运算符&#xff09;赋值运算符逗号运算符&#xff08;顺序求值运算符&#xff09; 表达式 运算符 运算符的分类 C语言的运算符范围很宽&#xff0c;除了控制语句和输入输出…

如何安装python

以下的安装仅针对Windows10系统 一、下载python和解释器 解释器下载 第一步&#xff0c;找到下载的地方 1.找到官网 2.直接点击地址链接 Python Release Python 3.7.2 | Python.org 第二步&#xff0c;找到对应的版本进行安装 进入页面之后&#xff0c;下滑&#xff0c;…

【学术会议征稿】第六届土木建筑与城市工程国际学术会议(ICCAUE 2024)

第六届土木建筑与城市工程国际学术会议&#xff08;ICCAUE 2024&#xff09; 2024 6th International Conference on Civil Architecture and Urban Engineering (ICCAUE 2024) 第六届土木建筑与城市工程国际学术会议&#xff08;ICCAUE 2024&#xff09;将于2024年11月15-17…

学习008-02-04-08 Localize UI Elements(本地化UI元素)

Localize UI Elements&#xff08;本地化UI元素&#xff09; This lesson explains how to localize an XAF application. It describes how to translate UI elements into German and create a multi-language application. 本课介绍如何本地化XAF应用程序。它描述了如何将U…

二次开发必备:开源在线海报图片设计器——poster-design

一、介绍 poster-design是一个最酷的开源在线海报图片设计器&#xff0c;漂亮易用且功能强大。它适用于多种场景&#xff1a;海报图片生成、电商分享图、文章长图、视频/公众号封面等&#xff0c;无需下载软件即可轻松实现创意、迅速完成排版。使用Vue3 、Vite5 、Vuex 、Elem…

Vite + Vue3 + TS项目配置前置路由守卫

在现代前端开发中&#xff0c;使用 Vue 3 和 TypeScript 的组合是一种流行且高效的开发方式。Vite 是一个极速的构建工具&#xff0c;可以显著提升开发体验。本文博主将指导你如何在 Vite Vue 3 TypeScript 项目中配置前置路由守卫&#xff08;Navigation Guards&#xff09;…

使用JavaFx Fxml笔记

使用JavaFx Fxml实现账号密码登录 HelloApplication.java&#xff1a;package com.example.dr295cmonth7;import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.geometry.Insets; import javafx.scene.Parent; import javafx.scene.Scene; i…

敏感信息泄露wp

1.右键查看网页源代码 2.前台JS绕过&#xff0c;ctrlU绕过JS查看源码 3.开发者工具&#xff0c;网络&#xff0c;查看协议 4.后台地址在robots,拼接目录/robots.txt 5.用dirsearch扫描&#xff0c;看到index.phps,phps中有源码&#xff0c;拼接目录&#xff0c;下载index.phps …