首先看效果:
具体代码如下:
html代码
*[HTML]: 没有使用花括号渲染,所以需要 $options.filters 来找到过滤器
*[HTML]: item.cpmc 为需要添加颜色的 段落内容
*[HTML]: searchValue 为当前搜索框搜索的 关键字
<view class="lc-name" v-html="$options.filters.formatMc(item.cpmc, searchValue)"></view>
javascript代码:
// 由于 关键字val 是动态变化的所以需要 RegExp() 方法定义正则
filters: {
formatMc(mc, val ) {
let reg = RegExp(val,"g")
console.log('format',reg, mc, val)
return mc.replace(reg, '<font style="color: #D7001E;">' + val + '</font>')
}
},
由于在小程序中是使用
rich-text
进行渲染的,所以在设置颜色的时候要使用
<font
标签来包裹才能使颜色生效
版权声明:本文为weixin_45289067原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。