Vue3中让搜索出来的关键词标红

最新推荐文章于 2024-06-04 14:04:24 发布

扶苏1002

最新推荐文章于 2024-06-04 14:04:24 发布

阅读量205

点赞数 1

分类专栏： Vue3实战 uniapp 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_44741577/article/details/138971636

版权

uniapp 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Vue3实战

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

关键v-html

<!-- 模糊查询下拉面板 -->
<view v-for="item in historyList" :key="item">
	<!-- 每一条模糊匹配的记录 -->
	<view v-html="renderColor(item)"></view>
</view>

renderColor代码

// 搜索关键词
const keyWords = ref('')
// 处理搜索标红
const renderColor = (item) => {
	if (keyWords.value !== '' && item.indexOf(keyWords.value) !== -1) {
		return item.replace(keyWords.value, `<font style="color: red">${keyWords.value}</view>`)
	}
	return item
}