输入框输入关键字 下拉框的关键字高亮

直接上代码

//搜索框部分
<div>
	<input v-model='keyWord' />
	<button @click='seachFn'>搜索</button>
</div>
//下拉框部分
<div>
	<div v-html="item.name" v-for='item in droplist' :key='item.id'></div>
</div>
<script>
	export default {
    
		data(){
   
			return {
   
				keyWord:'',
				droplist:[]
			}
		},
		methods:{
   
			seachFn(){
   
			//	假设后台返回的数据
				const res = [{
   
					id: '2',
					name: ' 哈哈测试号'
				}, {
   
					id: '3',
					name: '孙悟空大妖怪测试'
				}, {
   
					id: '5',
					name: '测试白骨精'
				}, {
   
					id: '6',
					name: '测试号'
				}]
				this.droplist = res.map(item => {
   
					if (item.name.indexOf(this.keyWord) != -1) {
   
						//对关键字 进行处理
						let str=`<span style='color:red'>${
     this.keyWord}</span>`
						
						item.name =
							`<div>${
     item.name.replace(this.keyWord,str)}</div>`
					}
					return item
				})
				
			}
		}
	}
</script>

水平有限难免有纰漏，欢迎纠错