uniapp 模糊搜索列表，若与搜索关键词相同，则标色

需求在搜索框输入搜索关键字，若列表中，客户名与搜索关键词相同，则标蓝色；若N个字相同，则N个字均标成蓝色。一、贴个UI图若N个字相同，则N个字均标成蓝色。例如输入陈晓，则陈晓两字均标成蓝色。二、思路将列表的客户名postName拆分为数组，将数组循环，再做样式的动态绑定（此处省略外层列表循环）。//css<text v-for="(item,index) in postName.split(

Acardia_Liu

2110人浏览 · 2022-01-06 20:54:02

Acardia_Liu · 2022-01-06 20:54:02 发布

需求

在搜索框输入搜索关键字，若列表中，客户名与搜索关键词相同，则标蓝色；若N个字相同，则N个字均标成蓝色。

一、贴个UI图

若N个字相同，则N个字均标成蓝色。例如输入陈晓，则陈晓两字均标成蓝色。
在这里插入图片描述

二、思路

将列表的客户名postName拆分为数组，将数组循环，再做样式的动态绑定（此处省略外层列表循环）。

//css
<text v-for="(item,index) in postName.split('')" :key="index" :style="setColor(item)">
		{{item}}
</text>
//methods
// 设置模糊搜索的匹配字体颜色(inputVal为输入关键字)
	setColor(e) {
		// 代表在搜索关键字中存在相匹配的串
		if (this.inputVal.indexOf(e) != -1) {
			return 'color:#007AFF'
			}
	},