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

get与post拼接url地址不同:

javascript 复制代码
 let postData = {
        method: "post",
        data: {
          op: "/api/setting/maintenanceperiod?period="+this.authorizationCode,
          loadingConfig: {},
          data: {
            period:this.authorizationCode
          }
        }
      };
javascript 复制代码
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赋值,并绑定样式。

javascript 复制代码
 <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>
javascript 复制代码
 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循环:

javascript 复制代码
     <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>
相关推荐
iphone1085 分钟前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
留不住丨晚霞19 分钟前
说说SpringBoot常用的注解?
java·开发语言
老坛00122 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00123 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
华科云商xiao徐25 分钟前
Java多线程爬虫动态线程管理实现
java·爬虫·数据挖掘
今禾26 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐30 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价31 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花32 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101332 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端