需求：实现搜索关键字高亮显示

搜索关键字高亮显示

<template>
	<div class="container">
		<input  v-model="searchValue" type="text" placeholder="请输入关键字" />
	<div class="search-list"
		v-for="(v, i) in list"
		:key="i"
	>
		<div class="search-wrap">
			<p class="search-title" v-html="v.title"></p>
		</div>
	</div>
	</div>
</template>

export default {
	data () {
		return {
			searchValue: "",
			list: [],  // 定义列表数组
		}
	},
	
	created () {
		this.getList();
	},
	methods: {
		getList () {
			uni.request({
				url: '请求地址',
				method: '请求方法',
				success: (res) => {
				this.list = res.data.data;
				this.changeTextColor(this.list)
				}
			})
		},
		// 文字高亮
		changeTextColor (data) {
			data.map((v, i) => {
				if (this.searchValue && this.searchValue.length > 0) {
					let replaceReg = new RegExp(this.searchValue, 'g');
					let replaceString = '<span class="search-text">' + this.searchValue + '</span>'
					data[i].title = v.title.replace(replaceReg, replaceString)
				} 
			});
			this.list = [];
			this.list = data;
		},
	}
}

<style>
	.search-text {
		color: #00ff00;
	}
</style>