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
}

需要注意的是,如果需要更改字体大小,不能使用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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/35323.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决pycharm安装dlib失败的问题

今天使用pycharm来学习opencv人脸识别库face-recognition的时候出现了一点小问题&#xff0c;在pycharm中直接安装face-recognition会失败&#xff0c;说是因为缺少依赖库dlib&#xff0c;但是直接使用pycharm安装dlib库也有问题&#xff0c;不知道大家遇到没有 错误提示 note…

【深度学习】菜品目标检测软件系统

深度学习类文章回顾 【YOLO深度学习系列】图像分类、物体检测、实例分割、物体追踪、姿态估计、定向边框检测演示系统【含源码】 【深度学习】物体检测/实例分割/物体追踪/姿态估计/定向边框/图像分类检测演示系统【含源码】 【深度学习】YOLOV8数据标注及模型训练方法整体流程…

AI智能写作工具,AI写作助手大全

随着人工智能技术的快速发展&#xff0c;AI智能写作工具助手已成为学术研究、内容创作和商业文案等领域的重要辅助工具。它们不仅能够提高写作效率&#xff0c;还能激发创意灵感&#xff0c;为各行各业的专业人士提供了强大的支持。下面小编将为大家全面介绍目前市场上备受瞩目…

[C#][opencvsharp]C#使用opencvsharp进行年龄和性别预测支持视频图片检测

使用 OpenCVSharp 来调用 age_net.caffemodel 和 gender_net.caffemodel 来进行性别和年龄预测涉及几个步骤。以下是一个简化的流程和示例文案&#xff1a; 1. 准备工作 确保你已经安装了 OpenCVSharp 和相关的依赖项。确保你有 age_net.prototxt、age_net.caffemodel、gende…

大数据面试必问的数据治理面试题大全及参考答案

什么是数据治理?它与数据管理的区别是什么? 数据治理是组织内数据的系统性管理策略,它确保数据在整个生命周期中的可用性、准确性、安全性和合规性。数据治理不仅关乎技术实施,更是关于组织结构、政策、流程和标准的建立,以指导数据的收集、存储、处理、保护和利用。它关…

代码随想录算法跟练 | Day10 | 栈与队列 Part01

个人博客主页&#xff1a;http://myblog.nxx.nx.cn 代码GitHub地址&#xff1a;https://github.com/nx-xn2002/Data_Structure.git Day10 232. 用栈实现队列 题目链接&#xff1a; https://leetcode.cn/problems/implement-queue-using-stacks/ 题目描述&#xff1a; 请你仅…

在 Debian 服务器上安装和配置 Apache Tomcat 的方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 介绍 Apache Tomcat 是一个应用服务器&#xff0c;可用于向 web 用户提供 Java 应用程序。它是由 Sun Microsystems 开发的 Java Servle…

详解SpringSecurity中的Filter Chain

在Spring Security中&#xff0c;Filter Chain&#xff08;过滤器链&#xff09;是实现请求安全控制的核心。Spring Security的安全框架是建立在Servlet过滤器的基础上的&#xff0c;通过一系列过滤器来实现不同的安全特性&#xff0c;如认证、授权等。 什么是Filter Chain F…

正版软件 | 『闪点清单』— 您的智能悬浮任务管理专家

在繁忙的日常中&#xff0c;我们经常需要一个既能随时提醒&#xff0c;又不会打扰我们的待办事项管理工具。『闪点清单』&#xff0c;一款简约而不简单的悬浮清单软件&#xff0c;为您带来全新的任务管理体验。 设计简约&#xff0c;功能强大 『闪点清单』以其简约的设计和强大…

CVPR讲座总结(二)-探索图像生成基础模型的最新进展探索多模态代理的最新进展:从视频理解到可操作代理

引言 在CVPR24上的教程中&#xff0c;微软高级研究员Linjie Li为我们带来了多模态代理的深入探索。这些代理通过整合多模态专家和大语言模型&#xff08;LLM&#xff09;来增强感知、理解和生成能力。本文总结了Linjie Li的讲座内容&#xff0c;重点介绍了多模态记忆、可操作代…

供应链攻击是什么?

随着企业对技术和连接性的依赖日益增加&#xff0c;以及对第三方的普遍依赖&#xff0c;供应链攻击变得越来越普遍。这些攻击旨在通过供应商和商业伙伴损害企业。 供应链攻击可能对企业和组织构成重大威胁&#xff0c;因为它们可能危及它们的安全以及向客户提供的产品和服务的…

GPT-5或于一年半后发布?浅谈智能的飞跃与未来

一、前言 IT之家6月22日消息&#xff0c;在美国达特茅斯工程学院周四公布的采访中&#xff0c;OpenAI首席技术官米拉穆拉蒂被问及GPT-5是否会在明年发布&#xff0c;给出了肯定答案并表示将在一年半后发布。 技术的风暴从未停止&#xff0c;人工智能作为这场风暴中的旋风&…

ant-design-vue:Button的样式不是蓝色

ant-design-vue中a-button&#xff0c;设置的样式是“primary”。但不是蓝色。 解决方法&#xff1a;重新自定义样式 参考链接&#xff1a; https://www.jianshu.com/p/0b2fde46c761 HTML&#xff1a; <a-buttonclass"c-button-primary"type"primary&quo…

《昇思25天学习打卡营第2天 | 张量 Tensor》

《昇思25天学习打卡营第2天 | 张量 Tensor》 《昇思25天学习打卡营第2天 | 张量 Tensor》 《昇思25天学习打卡营第2天 | 张量 Tensor》什么是张量&#xff08;Tensor&#xff09;张量的创建方式根据数据直接生成从NumPy数组生成使用init初始化器构造张量继承另一个张量的属性&a…

unity 导入的模型设置讲解

咱们先讲Model这一栏 Model Scene&#xff1a;场景级属性&#xff0c;例如是否导入灯光和照相机&#xff0c;以及使用什么比例因子。 Scale Factor&#xff1a;缩放因子&#xff08;也就是模型导入后大小如果小了或者大了在这里直接改是相当于该模型的大小的&#xff0c;而且在…

浏览器扩展V3开发系列之 chrome.runtime 的用法和案例

【作者主页】&#xff1a;小鱼神1024 【擅长领域】&#xff1a;JS逆向、小程序逆向、AST还原、验证码突防、Python开发、浏览器插件开发、React前端开发、NestJS后端开发等等 chrome.runtime API 提供了一系列的方法和事件&#xff0c;可以通过它来管理和维护 Chrome 扩展的生命…

让GNSSRTK不再难【第14讲-第二部分】

14.1.2 多个系统多个频率 在 10.3 节中,我们介绍了卫星码偏差产生原因,信号发出的是天线相位中心,而不是信号发生器。同样的,对于接收机也存在相同的问题,即从模拟机的天线相位中心到内部信号跟踪环路这段的时延我们是无法知晓的。 如果多个系统仅仅使用一个地点进行定位…

什么!你还不会Redis?跟着我讲透Redis【上篇之初识与安装】

1 NoSQL是什么 1.1 NoSQL数据库概述 NoSQL(NoSQL Not Only SQL )&#xff0c;意即”不仅仅是SQL“&#xff0c;泛指非关系型的数据库。 NoSQL 不依赖业务逻辑方式存储&#xff0c;而以简单的key-value模式存储。因此大大的增加了数据库的扩展能力。 不遵循SQL标准。不支持A…

PKG打包sqlite3项目,如何添加node_sqlite3.node依赖

项目地址&#xff1a;https://github.com/helson-lin/pkg_sqlite 在ffandown项目内&#xff0c;由于项目使用了sqlite3&#xff0c;在跨平台打包的时候&#xff0c;除了本机外其他平台打包之后运行缺少node_sqlite3.node依赖。 为了解决问题&#xff0c;百度了很久&#xff0c…

构建RESTful API:PHP框架中的实践与策略

随着Web服务的兴起&#xff0c;RESTful API成为前后端分离架构中的关键组件。PHP作为一种广泛使用的服务器端脚本语言&#xff0c;通过各种现代框架提供了构建RESTful API的强大工具和灵活性。本文将详细介绍如何在PHP框架中实现RESTful API&#xff0c;探讨设计原则、实现步骤…