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

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.lryc.cn/news/127059.html

相关文章:

  • Remote Sensing,2023 | 基于SBL的分布式毫米波相干雷达成像的高效实现
  • Android学习之路(5) UI控件之Button (按钮)与 ImageButton (图像按钮)
  • Day 31 C++ STL常用算法(下)
  • 【Android Studio】 win11 安装配置 jdk17 超详细
  • IDEA下方工具栏SideBar没有Services解决方法 IDEA配合微服务学习多端口管理打开Services栏方法
  • [Vue warn]: Error in render: “SyntaxError: “undefined“ is not valid JSON“
  • ui设计师工作总结及计划范文模板
  • 【Kafka】2.在SpringBoot中使用官方原生java版Kafka客户端
  • 使用腾讯云轻量服务器Matomo应用模板建网站流量统计系统
  • clickhouse-监控配置
  • C++11并发与多线程笔记(5)互斥量概念、用法、死锁演示及解决详解
  • 华为云classroom赋能--Devstar使应用开发无需从零开始
  • 软件的数据回滚
  • git clone使用https协议报错OpenSSL SSL_read: Connection was reset, errno 10054
  • 化繁为简,使用Hibernate Validator实现参数校验
  • 【Qt】多线程
  • 腾讯云GPU服务器GN7实例NVIDIA T4 GPU卡
  • 3. 爬取自己CSDN博客列表(自动方式)(分页查询)(网站反爬虫策略,需要在代码中添加合适的请求头User-Agent,否则response返回空)
  • 利用HTTP代理实现请求路由
  • 深度学习(36)—— 图神经网络GNN(1)
  • 深入理解JVM——垃圾回收与内存分配机制详细讲解
  • 基于SSH框架实现的管理系统(包含java源码+数据库)
  • 图像识别代做服务:实现创新应用的新契机
  • Coreutils工具包,Windows下使用Linux命令
  • 神经网络基础-神经网络补充概念-13-python中的广播
  • HDFS原理剖析
  • css学习2(利用id与class修改元素)
  • wsl2(debian)安装python的不同版本例如3.8
  • Python教程(9)——Python变量类型列表list的用法介绍
  • springboot+VUE智慧公寓管理系统java web酒店民宿房屋住宿报修信息jsp源代码