for循環綁定id,更新html頁面的文字內容

需求:將方法中內容對齊
在這里插入圖片描述
實現方式

  • 給for循環中每個方法添加一個動態的id
  • 在DOM結果渲染完后,更新頁面數據,否則會報錯,找不到對應節點或對應節點為空
<view v-for="(item, index) in itemList" :key="index"><view class="cards-cell" v-if="item.MEMO"><view class="card-label w60">方法</view><view class="card-value" :id="`MEMO${index}`"> {{ item.MEMO }} </view></view>
</view>
調用接口,獲取到數據后,使用this.$nextTick
this.$nextTick(() => {this.changeMemo()
})changeMemo() {
for (var i = 0; i < this.itemList.length; i++) {if (this.itemList[i].MEMO) {var element = document.getElementById(`MEMO${i}`);if (element) {element.innerHTML = this.itemList[i].MEMO.replace(/ /g, '<br/>');}else{console.log('該元素不存在:');}}}
},

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/17771.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/17771.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/17771.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

OWASP十大API漏洞解析:如何抵御Bot攻擊?

新型數字經濟中&#xff0c;API是物聯網設備、Web和移動應用以及業務合作伙伴流程的入口點。然而&#xff0c;API也是犯罪分子的前門&#xff0c;許多人依靠Bot來發動攻擊。對于安全團隊來說&#xff0c;保護API并緩解Bot攻擊至關重要。那么Bot在API攻擊中處于怎樣的地位&#…

香橙派Kunpeng Pro測評

目錄 香橙派Kunpeng Pro開發板試用體驗 觀察理解與適用場景 體驗步驟 試用感受

【ARM+Codesys案例】T3/RK3568/樹莓派+Codesys枕式包裝機運動控制器

枕式包裝機是一種包裝能力非常強&#xff0c;且能適合多種規格用于食品和非食品包裝的連續式包裝機。它不但能用于無商標包裝材料的包裝&#xff0c;而且能夠使用預先印有商標圖案的卷筒材料進行高速包裝。同時&#xff0c;具有穩定性高、生產效率高&#xff0c;適合連續包裝、…

C語言 數組—— 一維數組下標越界問題分析

目錄 數組元素的訪問 一維數組元素的越界訪問 二維數組元素的越界訪問 小結 數組元素的訪問 訪問數組元素時&#xff0c; 下標越界 是大忌&#xff01; ? 編譯器通常不檢查下標越界&#xff0c;導致程序運行時錯誤 ? 下標越界&#xff0c;將訪問數組以外的空間 ? …

pyqt窗體水印

pyqt窗體水印 介紹效果代碼 介紹 給窗體加上水印 效果 代碼 import sys from PyQt5.QtWidgets import QApplication, QMainWindow from PyQt5.QtGui import QPainter, QColor, QFont,QPen from PyQt5.QtCore import Qtclass WatermarkedWindow(QMainWindow):def __init__(se…

鴻蒙4.2小版本推出,鴻蒙5.0已經不遠了

上個月&#xff0c;市場上迎來了華為鴻蒙系統4字開頭的小升級&#xff0c;版本來到了4.2版本。 我們先來看看4.2版本都給用戶帶來哪些特色&#xff1a; 界面切換更流暢&#xff1a;無論是響應速度還是操作手感&#xff0c;用戶都將感受到更加迅速和順滑的體驗 搜星速度的顯著…

工具:Visual Studio Code

一、VSCode生成exe 二、在vs中斷點調試 如果沒效果需要安裝如下與unity相連接的插件 三、注釋 1、代碼注釋 注釋和取消都是都是同一個命令&#xff1a;選中代碼&#xff0c;然后按住CtrlShift/ 2、方法或類注釋 /// 四、導航 五、將變量注釋展示到解釋面板 1、直接顯示 [Too…

Git提交時出現Merge branch ‘master‘ of ...之解決方法

最近遇到了一個問題 我是用git提交代碼的時候 分支上 顯示的是merge 意思是 合并代碼了 每次都會 創建一個分支 因為我和另一個小伙伴共同 開發一個項目 所以 小伙伴告訴我 總是創建新的分支 我細細看了一下 測試了一下 我們兩個人 修改不同的文件 同時修改 他提交了 我再提…

pip安裝軟件包提示“沒有那個文件或目錄”問題的處理

文章目錄 一、Python.h&#xff1a;沒有那個文件或目錄二、lber.h&#xff1a;沒有那個文件或目錄 一、Python.h&#xff1a;沒有那個文件或目錄 pip install -I python-ldap3.0.0b1 #異常提示In file included from Modules/LDAPObject.c:3:0:Modules/common.h:9:20: 致命錯…

React hooks - useLayoutEffect

useLayoutEffect 用法區別 用法 useLayoutEffect 和 useEffect 的使用方式很相似&#xff1a; useLayoutEffect 接收一個函數和一個依賴項數組作為參數只有在數組中的依賴項發生改變時才會再次執行副作用函數useLayoutEffect 也可以返回一個清理函數 useEffect(()>{retur…

【NVM】持久內存的架構

1 內存數據持久化 1.1 數據持久化 持久內存系統包含如下關鍵組件&#xff1a;微處理器、連接微處理器內存總線上的持久內存模組&#xff08;Persistent MemoryModule&#xff0c;PMM&#xff09;及持久內存上的非易失性存儲介質。 使用持久內存來實現數據的持久化&#xff0c…

SpringCloud系列(22)--Ribbon默認負載輪詢算法原理及源碼解析

前言&#xff1a;在上一篇文章中我們介紹了如何去切換Ribbon的負載均衡模式&#xff0c;而本章節內容則是介紹Ribbon默認負載輪詢算法的原理。 1、負載輪詢算法公式 rest接口第N次請求數 % 服務器集群總數 實際調用服務器下標&#xff08;每次服務器重啟后rest接口計數從1開始…

爬蟲在金融領域的應用:股票數據收集

介紹 在金融領域&#xff0c;準確及時的數據收集對于市場分析和投資決策至關重要。股票價格作為金融市場的重要指標之一&#xff0c;通過網絡爬蟲技術可以高效地從多個網站獲取實時股票價格信息。本文將介紹網絡爬蟲在金融領域中的應用&#xff0c;重點討論如何利用Scrapy框架…

展銳平臺+Android系統開發概要

文章目錄 一、縮略語二、系統分區1. UIS7885android13的系統分區 三、系統編譯四、開發調試 一、縮略語 BBAT&#xff1a;Baseband Auto Test&#xff0c;基帶自帶測試CRC&#xff1a;Cyclic Redundancy Check&#xff0c;循環冗余檢驗SPL&#xff1a;Secondary Program Loade…

給uniapp的擴展組件uni-file-picker設置默認顯示的圖片

官方給出的代碼如下所示&#xff0c;但是按照官網給出的代碼圖片并沒有顯示出來。 <template><uni-file-picker readonly :value"fileLists" :imageStyles"imageStyles" file-mediatype"image"></uni-file-picker> </temp…

FLutter里的“線程” 一文通關

前言 在Flutter中&#xff0c;啟動一個新線程來處理任務通常是指在另一個隔離區(isolate)中執行代碼。由于Dart使用單線程模型&#xff0c;它通過隔離區來實現并發。隔離區是獨立的執行線程&#xff0c;不共享內存&#xff0c;通過消息傳遞來通信。這種方法可以用來運行長時間…

JavaScript 自定義屬性操作

在 JavaScript 中&#xff0c;可以使用自定義屬性來存儲與元素相關的數據。自定義屬性允許開發人員在元素上存儲任何類型的數據&#xff0c;包括字符串、數字、對象等。接下來&#xff0c;我將詳細解析如何在 JavaScript 中操作自定義屬性&#xff0c;并提供相應的代碼示例。 …

四川農業大學Java實訓項目圓滿收官,匯智知了堂引領學子實踐創新

近日&#xff0c;四川農業大學與匯智知了堂共同舉辦的Java實訓項目正式迎來了項目匯報階段。本次實訓是匯智知了堂在高等教育領域深化校企合作、推動產教融合的一次重要實踐&#xff0c;旨在為廣大學子提供一個將理論知識與實際操作相結合的平臺。 在實訓過程中&#xff0c;匯…

cherry-markdown公式不好選中的問題

在我上一篇博客中&#xff0c;在解決公式插入預覽無效之后&#xff0c;還f發現cherry-markdown是通過css的:hover來進行公式的展示&#xff0c;導致不好選中 上一篇博客速達&#xff1a;cherry-markdown公式能插入但是預覽無效-CSDN博客 下面是解決方案&#xff0c;其實就是改…

selenium源碼學習

這里寫自定義目錄標題 歡迎使用Markdown編輯器新的改變功能快捷鍵合理的創建標題&#xff0c;有助于目錄的生成如何改變文本的樣式插入鏈接與圖片如何插入一段漂亮的代碼片生成一個適合你的列表創建一個表格設定內容居中、居左、居右SmartyPants 創建一個自定義列表如何創建一個…