vue v-html 改变数据中某些文字的颜色

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

<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 一个道理