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.pswp.cn/news/40308.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/40308.shtml
英文地址,請注明出處:http://en.pswp.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 時需要的工具…