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.mzph.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 创建一个自定义列表如何创建一个…