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

SEO机制算是让我玩明白了

 获取当前时间时间戳,返回遵循ISO 8601扩展格式的日期

 new Date(Date.now()).toISOString()

使用moment库转换回来

this.moment(new Date(Date.now()).toISOString()).format("YYYY-MM-DD")

 

 

 

js去掉富文本中html标签和图片

 filterHtmlTag(val) {if(!val){return false;}// 过滤掉富文本中的所有标签var filter = val.replace(/<(p|div)[^>]*>(<br\/?>| )<\/\1>/gi, "\n").replace(/<br\/?>/gi, "\n").replace(/<[^>/]+>/g, "").replace(/(\n)?<\/([^>]+)>/g, "").replace(/\u00a0/g, " ").replace(/ /g, " ").replace(/<\/?(img)[^>]*>/gi, "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/'/g, "'").replace(/"/g, '"').replace(/<\/?.+?>/g, "");var filterOver =filter.length > 400 ? filter.slice(0, 400) + "..." : filter;return filterOver;},

 控制伪元素的显示隐藏,并且可以对伪元素添加点击事件

我们需要在css做这种处理

父元素添加:pointer-events: none; 伪元素添加:pointer-events: auto;

<div@click="ele.unfoldButton=false"v-html="filterHtmlTag(ele.filterInfo) ||filterHtmlTag(ele.labels[0].value)"class="text-part":class="ele.unfoldButton?'setButton':''"></div>.text-part {height: 115px;background-color: rgb(242, 242, 242);padding: 10px;padding-bottom: 25px;overflow: hidden;position: relative;pointer-events: none;}
.setButton::after {content: "V";position: absolute;pointer-events: auto;font-weight: bold;bottom: 5px;left: 50%;font-size: 20px;color: var(--mainColor);display: inline-block;width: 25px;height: 20px;line-height: 20px;cursor: pointer;border-radius: 50%;margin-right: 5px;margin-left: 5px;text-align: center;}

页面上渲染失败[object Promise]

172c675bcdc140ed826e31e7d1174bf1.png 

 代码里是这样写的

   
{{filterHtmlTag(ele.filterInfo, ele.unfoldButton)}}//改变文字颜色changeWordColor(str, stringPart) {str = str.replace(stringPart,'<span style="color: var(--mainColor);">' + stringPart + "</span>");return str;},async filterHtmlTag(val, slice = false, searchStatus = this.openSearch) {if (!val) {return false;}// 过滤掉富文本中的所有标签var filter = val.replace(/<(p|div)[^>]*>(<br\/?>| )<\/\1>/gi, "\n").replace(/<br\/?>/gi, "\n").replace(/<[^>/]+>/g, "").replace(/(\n)?<\/([^>]+)>/g, "").replace(/\u00a0/g, " ").replace(/ /g, " ").replace(/<\/?(img)[^>]*>/gi, "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/'/g, "'").replace(/"/g, '"').replace(/<\/?.+?>/g, "");// 是否折叠var filterOver =filter.length > 400 ? filter.slice(0, 400) + "..." : filter;//如果是搜索状态if (searchStatus) {filterOver =this.changeWordColor(filterOver, this.propertyValue);filter = this.changeWordColor(filter, this.propertyValue);}return slice ? filterOver : filter;},

最发现是方法中我写了async,这方法变成异步了,所以才这样输出了,所以啊兄弟们没用的东西一定要删了,使用的时候获取实时的数据,别用async,即可解决此异常

 将elementui的tab切换与走马灯结合起来

04396a56532c4ae69a4709c0e7f2933b.png

 

  <el-tabs v-model="activeItemId" @tab-click="handleClick"><!-- 循环 --><el-tab-pane label="111" name="1"> <el-carouselv-if="ele.dbValueVOS && ele.dbValueVOS.length !== 0"ref="marquee"@change="val => setContentInfo(val, index)"trigger="click"height="150px"indicator-position="none":autoplay="false"arrow="always"><el-carousel-itemv-for="item in ele.dbValueVOS":key="item.id"><h4>{{ item.propertyName }}</h4></el-carousel-item></el-carousel></el-tab-pane>
</el-tabs>handleClick(tab, event) {// 点击tab切换,给走马灯部分指定下标
this.$refs.marquee[0].setActiveItem(this.activeItemId);//  // 将tab的下标指定为走马灯的下标// this.active = e // tab切换的下标//获取列表console.log(tab, event);},

 

修改JS数组中的一个对象的元素的值,其他对象的元素值都跟着变了

数组改完相应下标的的对象,其他下标数据也变了

使用$set给数组里的对象赋值,也改变了其他对象

vue $set 给数组集合对象赋值影响到其他元素

vue数据改变影响其他数据的问题

vue 变量赋值变量,两个变量就会互相影响

vue只是给一条数据赋值却影响到了其他数据

  setContentInfo(valIndex, parentIndex) {var {propertyValue} = this.reportList[parentIndex].dbValueVOS[valIndex];// TODO:给对象中的值赋值,走马灯切换后显示// this.$set(this.reportList[parentIndex], "filterInfo", propertyValue);},

离大谱了,就是个普通赋值,方法只调了一次,就算指定只给下标为0的数据赋值也影响到了其他数据

颠覆我的认知了,科学不存在了

 

 

解决方法如下,直接深拷贝一条,去给数组相应下标的整个对象替换

  setContentInfo(valIndex, parentIndex) {var {propertyValue} = this.reportList[parentIndex].dbValueVOS[valIndex];let realData =JSON.parse(JSON.stringify(this.reportList[parentIndex]));realData.filterInfo=propertyValue;// TODO:给对象中的值赋值,走马灯切换后显示// this.$set(this.reportList[parentIndex], "filterInfo", propertyValue);this.$set(this.reportList, parentIndex, realData);},

 

 

相关文章:

SEO机制算是让我玩明白了

获取当前时间时间戳&#xff0c;返回遵循ISO 8601扩展格式的日期 new Date(Date.now()).toISOString() 使用moment库转换回来 this.moment(new Date(Date.now()).toISOString()).format("YYYY-MM-DD") js去掉富文本中html标签和图片 filterHtmlTag(val) {if(!val){…...

JDBC连接数据库详细教程指南

目录 一、JDBC介绍 二、JDBC环境的搭建 三、JDBC的开发步骤 1、加载JDBC驱动程序 2、建立数据库连接 3、创建Statement对象 4、执行SQL语句 5、处理结果集 6、关闭连接 7、示例程序 8、注意 一、JDBC介绍...

换个花样玩C++(2)柔性数组怎么玩

如果你涉足网络传输方向的开发,我想你对这段类似的代码应该不会很陌生,先看代码: int check_msg(svr_proto_t* pkg, uint32_t bodylen, fdsession_t* fdsess) {struct report_msg {uint32_t gameid;uint32_t userid;uint32_t recvid;uint32_t onlineid;uint32_t …...

【前端】一个好看的前端页面

序言 突发奇想&#xff0c;看到这个特效还不错&#xff0c;就加工了一下&#xff0c;如果也能帮到你&#xff0c;很开心 先上效果图 部分代码讲解 前端生成uuid function getUUID(len, radix) {var chars 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.s…...

flink on k8s提交任务

目录 相关文档前置准备构建镜像提交任务 相关文档 https://nightlies.apache.org/flink/flink-docs-release-1.13/docs/deployment/resource-providers/native_kubernetes/ 前置准备 flink的lib目录下放入两个依赖 bcpkix-jdk15on-1.68.jar bcprov-jdk15on-1.69.jar 创建用户…...

如何判定自己适合自学编程还是报班?

首先在这里&#xff0c;不做偏向性推荐&#xff0c;主要还是看个人条件。 宝剑锋从磨砺出&#xff0c;学习本身是一件艰苦的事情。在决定之前&#xff0c;建议先按照下图问自己三个问题自我检测。 如果你还不能确定&#xff0c;自学和报班的优劣势分析&#xff0c;或许能帮你们…...

本地缓存解决方案Caffeine | Spring Cloud 38

一、Caffeine简介 Caffeine是一款高性能、最优缓存库。Caffeine是受Google guava启发的本地缓存&#xff08;青出于蓝而胜于蓝&#xff09;&#xff0c;在Cafeine的改进设计中借鉴了 Guava 缓存和 ConcurrentLinkedHashMap&#xff0c;Guava缓存可以参考上篇&#xff1a;本地缓…...

Docker常用命令笔记

docker常用命令 1 基础命令 sudo docker version #查看docker的版本信息 sudo docker info #查看docker系统信息&#xff0c;包括镜像和容器的数量 2 镜像命令 1&#xff0e;sudo docker images #查看本地主机的所有主机镜像 #解释 **REPOSITORY **#镜像的仓库源TAG **** …...

Nachos系统的上下文切换

Fork调用创建进程 在实验1中通过gdb调试初步熟悉了Nahcos上下文切换的基本流程&#xff0c;但这个过程还不够清晰&#xff0c;通过源码阅读进一步了解这个过程。 在实验1中通过执行Threadtest&#xff0c;Fork创建子进程&#xff0c;并传入SimpleThread执行currentThread->…...

streamx平台部署

一. streamx介绍 StreamPark 总体组件栈架构如下&#xff0c; 由 streampark-core 和 streampark-console 两个大的部分组成 , streampark-console 是一个非常重要的模块, 定位是一个综合实时数据平台&#xff0c;流式数仓平台, 低代码 ( Low Code ), Flink & Spark 任务托…...

css中的background属性

文章目录 一&#xff1a;background-repeat二&#xff1a;background-position三&#xff1a;background缩写方式三&#xff1a;background-size四&#xff1a;background-origin五&#xff1a;background-clip 在日常前端开发中&#xff0c;经常需要进行背景或背景图的处理。但…...

代码评审平台Gerrit安装配置方法介绍

Gerrit是一款开源免费的基于 web 的代码审查工具&#xff0c;是基于 Git 的版本控制系统。在代码入库之前对开发人员的提交进行审阅&#xff0c;检视通过的代码才能提交入库。本文记录如何安装部署gerrit平台。 目录 Gerrit简介环境准备1. 安装Java2. 安装Git3. 安装nginx4. 安…...

一篇文章解决Mysql8

基于尚硅谷的Mysql8.0视频&#xff0c;修修改改。提取了一些精炼的内容。 首先需要在数据库内引入一张表。链接地址如下。 链接&#xff1a;https://pan.baidu.com/s/1DD83on3J1a2INI7vrqPe4A 提取码&#xff1a;68jy 会进行持续更新。。 1. Mysql目录结构 Mysql的目录结构…...

【Python】【进阶篇】6、Django视图函数

目录 6、Django视图函数1. 第一个视图函数1&#xff09;HttpResponse视图响应类型2&#xff09;视图函数参数request3&#xff09;return视图响应 2. 视图函数执行过程 6、Django视图函数 视图是 MTV 设计模式中的 V 层&#xff0c;它是实现业务逻辑的关键层&#xff0c;可以用…...

Latex常用符号和功能记录

公式下括号 \underbrace & \overbrace \begin{equation} \underbrace{L_1L_2}_{loss ~ 1} \overbrace{L_3L_4}^{loss ~ 2} \end{equation}L L 1 L 2 ⏟ l o s s 1 L 3 L 4 ⏞ l o s s 2 L \underbrace{L_1L_2}_{loss ~ 1} \overbrace{L_3L_4}^{loss ~ 2} Lloss 1…...

MySQL高级篇——索引的创建与设计原则

导航&#xff1a; 【黑马Java笔记踩坑汇总】JavaSEJavaWebSSMSpringBoot瑞吉外卖SpringCloud黑马旅游谷粒商城学成在线牛客面试题 目录 一、索引的分类与使用 1.1 索引的分类 1.1.1. 普通索引 1.1.2. 唯一性索引 1.1.3. 主键索引&#xff08;唯一非空&#xff09; 1.1.4…...

王一茗: “大数据能力提升项目”与我的成长之路 | 提升之路系列(三)

导读 为了发挥清华大学多学科优势&#xff0c;搭建跨学科交叉融合平台&#xff0c;创新跨学科交叉培养模式&#xff0c;培养具有大数据思维和应用创新的“π”型人才&#xff0c;由清华大学研究生院、清华大学大数据研究中心及相关院系共同设计组织的“清华大学大数据能力提升项…...

MySQL:数据库的基本操作

MySQL是一个客户端服务器结构的程序, 一.关系型数据库 关系型数据库是一个结构化的数据库&#xff0c;创建在关系模型&#xff08;二维表格模型&#xff09;基础上&#xff0c;一般面向于记录。 主流的关系型数据库包括 Oracle、MySQL、SQL Server、Microsoft Access、DB2 等. …...

银行系统【GUI/Swing+MySQL】(Java课设)

系统类型 Swing窗口类型Mysql数据库存储数据 使用范围 适合作为Java课设&#xff01;&#xff01;&#xff01; 部署环境 jdk1.8Mysql8.0Idea或eclipsejdbc 运行效果 本系统源码地址&#xff1a;​​​​​​​https://download.csdn.net/download/qq_50954361/87708777 …...

【社区图书馆】-《科技服务与价值链》总结

【为什么研究价值链】 价值链及价值链协同体系是现代产业集群的核心枢纽&#xff0c;是推进城市群及产业集群化、服务化、生态化发展的纽带。因而推进价值链协同&#xff0c;创新发展价值链协同业务科技资源体系&#xff0c;既是科技服务业创新的重要方向&#xff0c;也是重塑生…...

springboot+vue基于web的电脑配件商城的设计系统

目录 同行可拿货,招校园代理 ,本人源头供货商系统功能模块划分技术架构设计要点特色功能实现路径安全防护措施扩展性考虑 项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作 同行可拿货,招校园代理 ,本人源头供货商 系统功能模块…...

实战应用:基于快马AI与OpenClaw构建Mac本地电商价格监控系统

最近在做一个电商价格监控的小工具&#xff0c;发现用OpenClaw配合Mac本地环境搭建特别方便。这里分享一下我的实战经验&#xff0c;希望能帮到有类似需求的同学。 为什么选择OpenClaw OpenClaw是个轻量级的Python爬虫框架&#xff0c;特别适合需要快速搭建数据采集系统的场景…...

PyTorch 3.0静训性能断崖预警:当AllReduce延迟>8.3ms或图编译耗时>117s时,你的训练任务已在 silently fail——附实时诊断CLI工具

第一章&#xff1a;PyTorch 3.0静态图分布式训练的静默失效危机全景PyTorch 3.0 引入的 TorchScript 静态图编译机制与 torch.distributed 的深度耦合&#xff0c;在多节点多卡场景下暴露出一类高危静默失效现象&#xff1a;训练进程持续运行、梯度同步无报错、loss 曲线看似收…...

comsol的单相变压器绕组及铁芯振动形变仿真模型 1、单相变压器组振动形变模型:绕组在漏磁场...

comsol的单相变压器绕组及铁芯振动形变仿真模型 1、单相变压器组振动形变模型:绕组在漏磁场的洛伦兹力作用下振动&#xff0c;在长期作用下发生位移形变 2、单相变压器铁芯振动形变模型:铁芯在磁致伸缩作用下发生振动形变 注:时域仿真可以设置观察点&#xff0c;导出随时间变化…...

5分钟成为效率大师!NoteGen快捷键可视化配置终极指南

5分钟成为效率大师&#xff01;NoteGen快捷键可视化配置终极指南 【免费下载链接】note-gen 一款专注于记录和写作的跨端 AI 笔记应用。 项目地址: https://gitcode.com/GitHub_Trending/no/note-gen NoteGen是一款专注于记录和写作的跨端AI笔记应用&#xff0c;通过快捷…...

告别手动操作!Open-AutoGLM让iPhone听懂人话,自动执行指令

告别手动操作&#xff01;Open-AutoGLM让iPhone听懂人话&#xff0c;自动执行指令 1. 引言 你是否厌倦了每天重复点击手机屏幕的操作&#xff1f;是否希望手机能像真人助理一样理解你的需求并自动完成任务&#xff1f;今天我要介绍的Open-AutoGLM正是这样一个革命性的AI手机智…...

基于 SpringBoot 的自助图书借阅管理系统源码讲解

以下是一个基于 SpringBoot 的自助图书借阅管理系统的 核心源码讲解&#xff0c;涵盖用户管理、图书管理、借阅管理、设备对接等关键模块&#xff0c;代码结构清晰&#xff0c;可直接用于学习或二次开发。一、项目结构src/main/java/com/library/ ├── config/ # 配…...

软考高项“上岸”指南:三位宝藏老师,专治你的备考焦虑

备战软考高项&#xff0c;尤其是面对2026年可能更加灵活的考情&#xff0c;选择一位对的引路人至关重要。今天&#xff0c;就为大家深度介绍软考老金团队的三位王牌导师——尹老师、金老师、秦老师。他们风格互补&#xff0c;却有着共同的目标&#xff1a;陪你稳稳上岸。尹老师…...

OPENIPC[ssc338Q+hi3536dv100]开源图传----硬件选型与实战避坑指南

1. 开源图传系统硬件选型逻辑 第一次接触OPENIPC开源图传时&#xff0c;我和大多数新手一样被各种专业术语搞得头晕眼花。经过三个月的实际搭建和测试&#xff0c;终于摸清了硬件选型的门道。这里分享的不仅是参数对比&#xff0c;更是我踩过坑后总结的实战经验。 核心硬件架构…...

千问3.5-2B一文详解:4.3GB权重免下载、24GB显存优化、温度参数调优手册

千问3.5-2B一文详解&#xff1a;4.3GB权重免下载、24GB显存优化、温度参数调优手册 1. 千问3.5-2B模型概述 千问3.5-2B是Qwen系列中的小型视觉语言模型&#xff0c;专为图片理解与文本生成任务设计。这个模型最吸引人的特点是它能同时处理视觉和语言信息&#xff0c;让你通过…...