有的需求是,一段文字中,有几个字,词语需要标记,画重点,改颜色
如果后端能给你处理好,单独返回那好说,如果后端懒,不想给你分开弄,一股脑全给你扔来
那就只能靠自己了

<div style="width: 60rpx;display: flex;" v-html="text">}</div>

比如后端给你扔了个text,内容是"我愿变成童话里,你爱的那个天使"
需求是你要把,童话,天使变颜色,所以加上v-html,添加一个标签

代码如下:

var str = '我愿变成童话里,你爱的那个天使';
var replace_text= ["童话","天使"]
var color_dict = {"童话":"rgb(255, 0, 0)","天使":"rgb(0, 0, 255)"}
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>";
	str = str.replace(RegExp(replace_text[i],'g') ,replaceString);
}
this.text = str;

效果:效果

v-html 作用就是在某个标签中添加自定义的标签,并且渲染到页面,跟jquery的jq.append 一个道理

Logo

前往低代码交流专区

更多推荐