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

news/2024/11/15 8:20:55/

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.ppmy.cn/news/1035760.html

相关文章

Linux 僵死进程

fork复制进程之后&#xff0c;会产生一个进程叫做子进程&#xff0c;被复制的进程就是父进程。不管父进程先结束&#xff0c;还是子进程先结束&#xff0c;对另外一个进程完全没有影响&#xff0c;父进程和子进程是两个不同的进程。 一、孤儿进程 现在有以下代码&#xff1a;…

【tkinter 专栏】组件、组件属性以及布局

文章目录 前言本章内容导图1. 窗口组件1.1 Widget 组件的分类文本类组件按钮类组件选择列表类组件容器类组件会话类组件菜单类组件进度条组件1.2 Widget 的公共属性1. fg/bg2. width/height3. anchor4. padx/pady5. font6. relief7. cursor1.3 Widget 的公共方法2. 组件的布局

ClickHouse(十八):Clickhouse Integration系列表引擎

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术&#xff0c;IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &…

深度学习实战47-利用深度学习技术来解决复杂的人群计数问题,CrowdCountNet模型的应用

大家好,我是微学AI,今天给大家介绍一下深度学习实战47-利用深度学习技术来解决复杂的人群计数问题,CrowdCountNet模型的应用。本篇文章,我将向大家展示如何使用CrowdCountNet这个神奇的工具,以及它是如何利用深度学习技术来解决复杂的人群计数问题。让我们一起进入这个充满…

概述、搭建Redis服务器、部署LNP+Redis、创建Redis集群、连接集群、集群工作原理

Top NSD DBA DAY09 案例1&#xff1a;搭建redis服务器案例2&#xff1a;常用命令限案例3&#xff1a;部署LNPRedis案例4&#xff1a;创建redis集群 1 案例1&#xff1a;搭建redis服务器 1.1 具体要求如下 在主机redis64运行redis服务修改服务运行参数 ip 地址192.168.88.6…

PHP FTP的相关函数及简单使用示例

简介 FTP是ARPANet的标准文件传输协议&#xff0c;该网络就是现今Internet的前身。 PHP FTP函数是通过文件传输协议提供对文件服务器的客户端访问&#xff0c;FTP函数用于打开、登陆以及关闭连接&#xff0c;也用于上传、下载、重命名、删除以及获取服务器上文件信息。 安装 …

Excel设置某列或者某行不某行不可以编辑,只读属性

设置单元格只读的三种方式: 1、通过单元格只读按钮&#xff0c;设置为只为 设置行或者列的只读属性&#xff0c;可以设置整行或者整列只读 2、设置单元格编辑控件为标签控件(标签控件不可编辑) 3、通过锁定行&#xff0c;锁定行的修改。锁定的行与只读行的区别在于锁定的行不…

Verilog同步FIFO设计

同步FIFO(synchronous)的写时钟和读时钟为同一个时钟&#xff0c;FIFO内部所有逻辑都是同步逻辑&#xff0c;常常用于交互数据缓冲。 异步FIFO&#xff1a;数据写入FIFO的时钟和数据读出FIFO的时钟是异步的(asynchronous) 典型同步FIFO有三部分组成: &#xff08;1&#xff0…