vue v-html 改变数据中某些文字的颜色
有的需求是,一段文字中,有几个字,词语需要标记,画重点,改颜色如果后端能给你处理好,单独返回那好说,如果后端懒,不想给你分开弄,一股脑全给你扔来那就只能靠自己了<div style="width: 60rpx;display: flex;" v-html="text">}</div>比如后端给你扔了个text,内容是"我愿变成童话里,你爱的那个天使"需求是你要把,童话,天使
·
有的需求是,一段文字中,有几个字,词语需要标记,画重点,改颜色
如果后端能给你处理好,单独返回那好说,如果后端懒,不想给你分开弄,一股脑全给你扔来
那就只能靠自己了
<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 一个道理
更多推荐
已为社区贡献2条内容
所有评论(0)