要求上图这样的样式
后端返的数据:
"第一个 是否替换:是 \n\r 第二个 是否替换:否"
根据 \n\r切割成数组
数组中每个元素遍历,
如果存在是否替换:是,则替换成<span style="color:red"></span>
如果存在是否替换:否,则替换成<span style="color:green"></span>
拼接成字符串
页面上用v-html渲染
if (row.remark) {
// console.log(row.remark, "----re");
let remarkarr = row.remark.split("\n\r");
// console.log(remarkarr, "remarkkk");
let newarr = [];
remarkarr.forEach((v) => {
// console.log(v, "-----v");
if (v.indexOf("是否标准:否") != -1) {
// console.log('-----ok1')
v = v.replace(
"是否标准:否",
"<span style='color:#F24040;fontWeight:600'>是否标准:否</span>"
);
// console.log(v,'----oooov')
newarr.push(v)
}
if (v.indexOf("是否标准:是") != -1) {
// console.log('-----ok2')
v = v.replace(
"是否标准:是",
"<span style='color:#F24040;fontWeight:600'>是否标准:是</span>"
);
newarr.push(v)
}
});
// console.log(remarkarr, newarr,'--------remarkarr')
let newremarkstr = newarr.join('<br/>')
this.remark = newremarkstr
}
另一种简单的办法:后端返回的数据中是带html标签的数据
"<span style='color:red'>是否标准:是</span>"