vue3使用v-html实现文本关键词变色
首先看应用场景
这有一段文本内容,是项目的简介,想要实现将文本中的关键词进行变色处理

有如下关键词

实现思路
遍历文本内容,找到关键词,并使用某种方法更改其字体样式。经过搜寻资料决定采用v-html实现,但是v-html本身并不安全,有安全性风险且影响性能,所以谨慎使用。
想详细了解的同学的同学可以看一下官网的介绍
uniapp官网v-htlml
vue官网v-html
实现代码
//存储结果
const introduction_content = ref('')
//定义函数
const updateColor = function (content: string) {let keywords = ['导师:', '关联比赛:', '获得成就:', '未来发展:', '奖金:']const result = ref(content) // 初始值为原始内容//本项目的需求是根据项目状态动态变更颜色const color = ref(detailData.value!.status == 0? 'rgba(7, 193, 96, 1)': detailData.value!.status == 1? 'rgba(250, 157, 59, 1)': detailData.value!.status == 2? 'rgba(250, 81, 81, 0.5)': '')// 遍历每个关键词并进行替换keywords.forEach((keyword) => {const regex = new RegExp(keyword, 'gi')// 每次替换都基于当前的 result.valueresult.value = result.value.replace(regex,`<span style="color: ${color.value};font-size:15px;">${keyword}</span>`)})introduction_content.value = result.value
}
然后在对应地方使用v-html绑定即可,绑定v-html的元素内部不能再有其他元素
<!-- 项目简介 --><viewclass="introduction"v-html="introduction_content"></view>
需要注意的是,如果需要更改字体大小,不能使用rpx等,需要使用px
可以输出introduction_content看一下,结果如下
xx项目简介
<span style="color: rgba(7, 193, 96, 1);font-size:15px;">导师:</span>xxx
<span style="color: rgba(7, 193, 96, 1);font-size:15px;">关联比赛:</span>建模
<span style="color: rgba(7, 193, 96, 1);font-size:15px;">奖金:</span>100
相关文章:
vue3使用v-html实现文本关键词变色
首先看应用场景 这有一段文本内容,是项目的简介,想要实现将文本中的关键词进行变色处理 有如下关键词 实现思路 遍历文本内容,找到关键词,并使用某种方法更改其字体样式。经过搜寻资料决定采用v-html实现,但是v-h…...
C#面:举列 a=10,b=15,在不用第三方变量的前提下,把a,b的值互换
要在不使用第三方变量的前提下交换a和b的值,可以使用异或运算。异或运算的特性是,对于两个相同的数进行异或运算,结果为0;对于任意数与0进行异或运算,结果为该数本身。因此,可以通过多次异或运算来实现变量…...
编写动态库
1.创建库.c .h文件 2.编写Makefile文件 3.make之后形成.so文件 4.make output,形成mylib 5.把mylib拷贝到test里面 mv mylib /test 6.编译 gcc main.c -I mylib/include -L mylib/lib -lmymethod形成a.out 但是直接执行会出现以下问题 很显然没有找到动态库 7.解决加载找不…...
记一次阿里云服务器java应用无法响应且无法远程连接的问题排查
问题表现 java服务无响应,无法远程链接到服务器。 今天中午12点多,应用直接崩溃。后续进入到服务器,发现java进程都不在了, 排查过程 先安装atop工具 安装、配置并使用atop监控工具 等下次再出现时看相关时间点日志ÿ…...
雷池WAF+Modsecurity安装防护及系统加固
君衍. 一、雷池WAF1、什么是雷池2、什么是WAF3、雷池的功能4、WAF部署架构5、整体检测流程 二、雷池WAF环境依赖1、查看本地CPU架构2、Docker安装2.1 卸载旧版本2.2 安装yum-utils工具包2.3 设置镜像仓库2.4 安装docker2.5 启动docker并查看版本 3、Docker Compose安装3.1 卸载…...
【Python】已解决:SyntaxError: positional argument follows keyword argument
文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决:SyntaxError: positional argument follows keyword argument 一、分析问题背景 在Python编程中,当我们在调用函数时混合使用位置参数(p…...
leetcode-20-回溯-切割、子集
一、[131]分割回文串 给定一个字符串 s,将 s 分割成一些子串,使每个子串都是回文串。 返回 s 所有可能的分割方案。 示例: 输入: "aab" 输出: [ ["aa","b"], ["a","a","b"] ] 分析&…...
利用深度学习模型进行语音障碍自动评估
语音的产生涉及器官的复杂协调,因此,语音包含了有关身体各个方面的信息,从认知状态和心理状态到呼吸条件。近十年来,研究者致力于发现和利用语音生物标志物——即与特定疾病相关的语音特征,用于诊断。随着人工智能&…...
TP8 JS(html2canvas) 把DIV内容生成二维码并与背景图、文字组合生成分享海报
方法一:前端JS生成(推荐) 注意: 1.这个网页只能截图图片效果代码,其它任何html效果都不能有,不然截图就不准确 2.如果要生成的图片DIV内容中引用了第三个方的图片,就是不使用同一个域名下的图片,需要把后…...
计算机科学中的接口(Interface)介绍
计算机科学中的接口(Interface)介绍 计算机科学中,接口是一个广泛的概念,在不同上下文中有不同含义: 1.任何两电路或设备间的连接电路,用于连接CPU与内存、CPU与外设之间。这是一个重要的硬件层面的接口概…...
大创项目推荐 题目:基于深度学习卷积神经网络的花卉识别 - 深度学习 机器视觉
文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 基…...
黑芝麻科技A1000简介
文章目录 1. A1000 简介2. 感知能力评估3. 竞品对比4. 系统软件1. A1000 简介...
详解C语言分支与循环语句
分支语句 if elseswitch 循环语句 whilefordo while goto语句 文章目录 1.什么是语句2.分支语句(选择结构)2.1 if语句2.1.1 悬空else2.1.3 练习 2.2 switch语句2.2.1 在switch语句中的break2.2.2 default子句 3.循环语句3.1 while循环3.1.1 while语句中…...
Python商务数据分析知识专栏(五)——Python数据分析的应用③使用Pandas进行数据预处理
Python商务数据分析知识专栏(五)——Python数据分析的应用③使用Pandas进行数据预处理 使用Pandas进行数据预处理1.合并数据2.清洗数据3.标准化数据4.转换数据 使用Pandas进行数据预处理 1.合并数据 2.清洗数据 3.标准化数据 4.转换数据...
Nosql期末复习
mongodb基本常用命令(只要掌握所有实验内容就没问题) 上机必考,笔试试卷可能考: 1.1 数据库的操作 1.1.1 选择和创建数据库 (1)use dbname 如果数据库不存在则自动创建,例如,以下…...
Pytest+Allure+Yaml+PyMsql+Jenkins+Gitlab接口自动化(四)Jenkins配置
一、背景 Jenkins(本地宿主机搭建) 拉取GitLab(服务器)代码到在Jenkins工作空间本地运行并生成Allure测试报告 二、框架改动点 框架主运行程序需要先注释掉运行代码(可不改,如果运行报allure找不到就直接注释掉) …...
SQL面试题练习 —— 查询前2大和前2小用户并有序拼接
目录 1 题目2 建表语句3 题解 1 题目 有用户账户表,包含年份,用户id和值,请按照年份分组,取出值前两小和前两大对应的用户id,需要保持值最小和最大的用户id排首位。 样例数据 ------------------------- | year | user_id | v…...
Arthas常见使用姿势
文章目录 Arthas常见使用姿势官网基本命令通用参数解释表达式核心变量说明常用命令一些常用特殊案例举例其他技巧关于OGNLOGNL的常见使用OGNL的一些特殊用法与说明OGNL内置的虚拟属性OGNL的个人思考OGNL的杂碎,收集未做验证 Arthas常见使用姿势 官网 https://arth…...
Apache Kylin的入门学习
Apache Kylin的入门学习可以从以下几个方面进行: 1. 了解Kylin的基本概念 定义:Apache Kylin是一个开源的分布式分析引擎,它基于Hadoop和HBase构建,提供Hadoop/Spark之上的SQL查询接口及多维分析(OLAP)能…...
React@16.x(46)路由v5.x(11)源码(3)- 实现 Router
目录 1,Router 的结构2,实现2.1,react-router1,matchPath.js2,Router.js3,RouterContext.jsx4,index.jsx 2.2,react-router-domBrowserRouter.jsxindex.jsx 1,Router 的结…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
可靠性+灵活性:电力载波技术在楼宇自控中的核心价值
可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量,这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
