get与post如何拼接url与数据的灵活处理,循环的重要性。

get与post拼接url地址不同:

 let postData = {method: "post",data: {op: "/api/setting/maintenanceperiod?period="+this.authorizationCode,loadingConfig: {},data: {period:this.authorizationCode}}};
if(this.editData.id){let postData = {method: "get",data: {op: "/api/" + this.editData.id + "/rmmc",loadingConfig: {},data: {id: this.editData.id,pwd: this.editData.password,},},};

后端返回一个:

某某市领导职数共20个,实配2,缺编<span style='color:#D1881B'>18</span>个,

进行页面渲染,有3种方式,第一种最笨的方式,自己手动敲出来,但是不够灵活,一旦后端的数据要变,可采用第二种,分割开来赋值。第三种相对灵活,直接循环分割的字符串,进行v-html赋值,并绑定样式。

 <div class="actual" v-if="returnZsbzText"><img src="../../../../static/images/head-renyuan.png" alt=""><!-- <span>一二级主任科员职数999个,</span><span>实有999个,</span><span>空缺999个</span> --><!-- <span v-html="returnZsbzText.split(',')[0]"></span><span v-html="returnZsbzText.split(',')[1]"></span><span v-html="returnZsbzText.split(',')[2]" :style="{ color: '#D1881B' }"></span><span v-html="returnZsbzText.split(',')[3]" :style="{ color: '#4177c7' }"></span> --><template v-for="sentence in returnZsbzText.split(',')"><span v-html="sentence" :style="getStyle(sentence)" :key=""></span></template></div>
 getStyle(sentence) {if (sentence.includes("style")) {// 提取style样式const styleStartIndex = sentence.indexOf('style="') + 7;const styleEndIndex = sentence.indexOf('"', styleStartIndex);const style = sentence.slice(styleStartIndex, styleEndIndex);// 解析样式字符串,提取color属性的值const colorStartIndex = style.indexOf("color:") + 6;const colorEndIndex = style.indexOf(";", colorStartIndex);const color = style.slice(colorStartIndex, colorEndIndex).trim();return { color: color };} else {return {}; // 默认样式}},

此时,若后端返回的是一个数组,数组里面是两条类似于以上的数据

[ "一二级主任科员职数0个,实有0个,;", "三四级主任科员职数0个,实有0个,;" ]

此时采用相同的方式,再加一个for循环:

     <div class="actualVacancy" v-if="returnRybzText"><div class="actual" v-for="(item,index) in returnRybzText" :key="index"><img src="../../../../static/images/head-renyuan.png" alt=""><template v-for="sentence in item.split(',')"><span v-html="sentence" :style="getStyle(sentence)" :key=""></span></template></div></div>

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

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

相关文章

Nginx运行Vue项目:基本运行

需求 在Nginx服务器中&#xff0c;运行Vue项目。 说明 Vue项目打包生成的生产文件&#xff0c;是无法直接在浏览器打开的。需要放到Nginx服务器中&#xff0c;才能够访问。 本文章只介绍最基本的情况&#xff1a;Nginx中运行一个Vue项目。 实际生产环境&#xff0c;一个Ng…

mysql 批量给数据表和字段添加注释

1、用命令行导出 mysql数据库中的所有表 首先查看 mysql 的配置文件 “/etc/my.cnf ”&#xff0c;配置中找到 datadir 目录&#xff0c; 将文件导出到 datadir 目录下 我的 datadir 目录是&#xff1a; /var/lib/mysql 连接mysql&#xff0c;执行导出命令 SELECT TABLE_NAM…

解密 AI 客服;在不同硬件设备上运行大型语言模型的可能性

&#x1f989; AI新闻 &#x1f680; 微软必应首席执行官称必应聊天优于OpenAI的GPT-4&#xff0c;但成本更高 摘要&#xff1a;微软必应的首席执行官米哈伊尔・帕拉欣表示&#xff0c;必应聊天表现优于OpenAI的GPT-4&#xff0c;但使用了更高成本的检索增强推理技术。必应聊…

中科亿海微ROM使用

标题 ROM&#xff08;Read-Only Memory&#xff0c;只读存储器&#xff09;是一种在FPGA&#xff08;Field-Programmable Gate Array&#xff0c;现场可编程门阵列&#xff09;中常用的存储器类型。与RAM&#xff08;Random Access Memory&#xff0c;机存取存储器&#xff09;…

Nginx安全加固,版本隐藏及HTTP请求头修改方法

1 隐藏nginx版本号 1.1 引言 nginx作为目前较为流行的http server软件&#xff0c;其相关的安全漏洞也非常多&#xff0c;攻击者可以根据我们的nginx版本来了解到相关的漏洞从而针对性的进行攻击。 通过新版本的nginx都会修复一些老版本的已知漏洞&#xff0c;但有时候我们生…

二刷LeetCode--148. 排序链表(C++版本),必会题,思维题

思路&#xff0c;本题其实考察了两个点&#xff1a;合并链表、链表切分。首先从1开始&#xff0c;将链表切成一段一段&#xff0c;因为需要使用归并&#xff0c;所以下一次的切分长度应该是当前切分长度的二倍&#xff0c;每次切分&#xff0c;我们拿出两段&#xff0c;然后将第…

虚拟机与Java虚拟机介绍

1、虚拟机 所谓虚拟机&#xff08;Virtual Machine&#xff09;&#xff0c;就是一台虚拟的计算机。它是一款软件&#xff0c;用来执行一系列虚拟计算机指令。大体上&#xff0c;虚拟机可以分为系统虚拟机和程序虚拟机。大名鼎鼎的Visual Box&#xff0c;VMware就属于 系统虚…

提示丢失vcomp140.dll怎么办?如何快速修复vcomp140.dll丢失问题

最近我遇到了一个程序启动失败的问题&#xff0c;错误提示显示缺少了vcomp140.dll文件。经过一番研究和尝试&#xff0c;我终于成功修复了这个问题。在这里&#xff0c;我将分享一下我的修复方法。 目录 vcomp140.dll是什么&#xff1f; 如何快速修复呢&#xff1f; vcomp140…

sCrypt编程马拉松于8月13日在复旦大学成功举办

继6月在英国Exeter大学成功举办了为期一周的区块链编程马拉松后&#xff0c;美国sCrypt公司创始人兼CEO刘晓晖博士带领核心团队成员王一强、郑宏锋、周全&#xff0c;于8月13日在复旦大学再次成功举办了一场全新的sCrypt编程马拉松。 本次活动由上海可一澈科技有限公司与复旦大…

C++笔记之花括号和圆括号初始化区别,列表初始化和初始化列表区别

C笔记之花括号和圆括号初始化区别&#xff0c;列表初始化和初始化列表区别 code review! 文章目录 C笔记之花括号和圆括号初始化区别&#xff0c;列表初始化和初始化列表区别1.花括号{}进行初始化和圆括号()进行初始化2.列表初始化&#xff08;list initialization&#xff0…

Vitis高层次综合学习——FPGA

高层次综合 什么是高层次综合&#xff1f;就是使用高级语言&#xff08;如C/C&#xff09;来编写FPGA算法程序。 在高层次综合上并不需要制定微架构决策&#xff0c;如创建状态机、数据路径、寄存器流水线等。这些细节可以留给 HLS 工具&#xff0c;通过提供输入约束&#xff…

专访阿里云席明贤,视频云如何运用大模型与小模型来破茧升级2.0

不久前&#xff0c;LiveVideoStack与阿里云视频云负责人席明贤&#xff08;花名右贤&#xff09;展开一场深度的对话&#xff0c;一个是圈内专业的社区媒体&#xff0c;一个是20年的IT老兵&#xff0c;双方有交集、有碰撞、有火花。 面对风云变幻的内外环境&#xff0c;阿里云…

未来数字银行的样子

对银行长期发展来讲&#xff0c;这意味着将关闭和减少 低效率的实体分行&#xff0c;加速向数字化发展。实现成本节省和 IT 预算提效的需求&#xff0c;将为数字柜台和银行代理点创造新的机遇。 一个崭新的世界&#xff1a;未来数字银行趋势图 现在是银行迎头赶上并为客户提供超…

拿来即用,自己封装的 axios

文章目录 一、需求二、分析1. 安装axios2. 新建一个 ts 文件&#xff0c;封装 axios3. store 存放 token 信息4. 使用5. 文件 type.js 一、需求 在日常开发中&#xff0c;我们会经常用到 axios &#xff0c;那么如何在自己的项目中自己封装 axios 二、分析 1. 安装axios np…

jenkins使用

安装插件 maven publish over ssh publish over ssh 会将打包后的jar包&#xff0c;通过ssh推送到指定的服务器上&#xff0c;&#xff0c;在jenkins中设置&#xff0c;推送后脚本&#xff0c;实现自动部署jar包&#xff0c;&#xff0c; 装了这个插件之后&#xff0c;可以在项…

非计算机科班背景者顺利转码计算机领域:策略与前景展望

方向一&#xff1a;如何规划才能实现转码&#xff1f; 对于非计算机科班背景的人想要顺利转码进入计算机领域&#xff0c;规划是至关重要的。以下是一些建议&#xff0c;可以帮助你在转码过程中更加顺利&#xff1a; 自我评估和目标设定&#xff1a; 首先&#xff0c;你需要明…

Weak Session IDs (弱会话)

Weak Session IDs (弱会话) 当用户登录后&#xff0c;在服务器就会创建一个会话(session)&#xff0c;叫做会话控制&#xff0c;接着访问页面的时候就不用登录&#xff0c;只需要携带Sesion去访问。 sessionID作为特定用户访问站点所需要的唯一内容。如果能够计算或轻易猜到该…

深入理解 Flutter 图片加载原理

作者&#xff1a;京东零售 徐宏伟 来源&#xff1a;京东云开发者社区 前言 随着Flutter稳定版本逐步迭代更新&#xff0c;京东APP内部的Flutter业务也日益增多&#xff0c;Flutter开发为我们提供了高效的开发环境、优秀的跨平台适配、丰富的功能组件及动画、接近原生的交互体验…

用对角线去遍历矩阵

声明 该系列文章仅仅展示个人的解题思路和分析过程&#xff0c;并非一定是优质题解&#xff0c;重要的是通过分析和解决问题能让我们逐渐熟练和成长&#xff0c;从新手到大佬离不开一个磨练的过程&#xff0c;加油&#xff01; 原题链接 用对角线遍历矩阵https://leetcode.c…

wsl2(debian)安装python的不同版本例如3.8

要在Debian上安装 Python 3.8&#xff0c;可以按照以下步骤操作&#xff1a; 1.确保你的 Debian 系统已经更新到最新版本&#xff0c;可以使用以下命令更新&#xff1a; sudo apt update sudo apt upgrade2.安装 Python 3.8 的依赖项&#xff0c;以及构建 Python 时需要的工具…