vue3 对象数组 关键字高亮

  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>