const data = reactive({
searkey: '建筑',
list: [{
title: '地下室顶板钢筋堆载及建筑加工对砼结构产生的影响都有哪些',
time: '2022年5月6日 6:44'
}, {
title: '中国建筑加工业的前景与未来',
time: '2022年5月6日 6:44'
}, {
title: 'BIM模型在建筑业的应用以及轻量化处理后产生的冗余',
time: '2022年5月6日 6:44'
}, {
title: '建筑加工材料',
time: '2022年5月6日 6:44'
}],
})
function lighting(val: any) {
let keyword = data.searkey
if (val.indexOf(keyword) !== -1) {
return val.replace(keyword, `<span style='color:red'>${keyword}</span>`)
} else {
return val
}
}
data.list.map((item) => {
item.title = lighting(item.title)
})
页面:
要用v-html 解析 replace 的 html
<div class="one-list" v-for="(item,index) in data.list" :key="index">
<p class="list-title" v-html="item.title"></p>
</div>