在vue中使用javascript动态修改字符串中某段文字的颜色

在vue`框架中使用javascript动态修改字符串指定字符的颜色。

<template><div style="height:200px;"><div style="margin-left: 5px;margin-top:2px;margin-right:5px;line-height:29px;"  v-html="result_text_show"></div></div>
</template><script>export default {name: "demo",data(){return{result_text_show,}},created:function(){this.getStringColorReplace();},methods:{getStringColorReplace:function() {//假设使用固定的文本，可后台接收var show_text = '学校查获禁止垃圾食品，并进行了检查。';var replace_text= ["学校","垃圾食品","检查"]var color_dict = {"学校":"rgb(76,142,218)","垃圾食品":"rgb(255,224,129)","检查":"rgb(247,151,103)"}for(var i=0;i<replace_text.length;i++){var color_temp = color_dict[replace_text[i]];var replaceString = '<span style="color: ' + color_temp + ';">' + replace_text[i] + "</span>";show_text = show_text.replace(RegExp(replace_text[i],'g') ,replaceString);}this.result_text_show = show_text;},}}
</script><style scoped></style>

此代码的结果如下图所示：

在vue中使用javascript动态修改字符串中某段文字的颜色相关推荐

javascript 动态修改css样式
方法一:改变外联css文件,这里不讲这个. 方法二:通过改变claaName来改变样式,语法: obj.className = "style2";//或者 obj.setAttri ...
微信小程序修改数组中的元素_微信小程序——this.setData()动态修改数组中的某一值...
微信小程序--this.setData()动态修改数组中的某一值S8v编程技术_踩坑日志_进阶指南_无知人生大家是不是都觉得微信小程序的开发方式和 vue react 这种框架的开发方式很像?S8v ...
JQuery实例（三）- 动态修改Table中的内容
在第一个例子中,二级联动,改变省份的时候,会动态修改另一个下拉框的内容. 这里修改为,改变一个Table中的内容. <%@ page language="java" cont ...
SAP QM中阶之动态修改规则创建
SAP QM中阶之动态修改规则创建 1, 执行事务代码QDR1或者如下的菜单路径, 可以用来创建动态修改规则. 点击菜单或者执行事务代码QDR1, 进入如下界面, 输入DMR的code,比如Z01,回 ...
JavaScript如何提取字符串中的数字
在JavaScript中可以使用match()方法将字符串中的数字提取到数字数组中 (1)不考虑小数 const str = "继续等待20秒...继续等待10秒...9,8,7,6,5,4 ...
js替换字符串某个字符，js修改字符串中指定字符
平时用到elementui时,经常遇到多级树形结构,但是后端往往给前端反的每一级字段不一致,如果写个遍历循环将其改为一致麻烦的,不如直接将后台发的数组转为字符串,再将字符串中不一致的字段替换成一致的即 ...
Django动态获取mysql连接,django model中的choices 动态从数据库中获取
django model中的choices 动态从数据库中获取例如 model中,有一个type字段 type = models.CharField(max_length=255, default= ...
安卓动态修改系统状态栏背景和文字颜色，以及动态显示或隐藏系统状态栏
关于动态修改系统状态栏背景.字体和图标颜色,以及动态显示或隐藏系统状态栏,一直都是都是许多项目的常规需求.但是,由于不同版本间的兼容性差异,网上的实现方法多种多样.并且,许多方法都会存在这样.那样的不 ...
javascript 动态修改css样式方法汇总(四种方法)
在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...
c++ 获得文本修改时间_Aha Lottie | 动态修改 Lottie 中的文本
01. WHY 不少动画中,会带有一些业务数字,比如之前文章中提到的这段动画动态文案 Lottie 动画示例https://www.zhihu.com/video/11994883462648258 ...

在vue中使用javascript动态修改字符串中某段文字的颜色

在vue中使用javascript动态修改字符串中某段文字的颜色相关推荐

最新文章

热门文章