uniapp多组数组 搜索高亮效果demo（整理）

本文主要是介绍uniapp多组数组 搜索高亮效果demo（整理），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<template><view class="mT100"><input type="text" v-model="keyword" @input="filterList" placeholder="请输入关键词"><ul><li v-for="item in filteredList" :key="item.id"><span v-html="highlightKeyword(item.name)"></span></li></ul><ul><li v-for="item in filteredList1" :key="item.id"><span v-html="highlightKeyword(item.name)"></span></li></ul></view>
</template><script>export default {data() {return {keyword: '',list: [{name: '测试1',id: 1},{name: '测试2',id: 2},{name: '测试3',id: 3},],list1: [{name: '测试10',id: 1},{name: '测试20',id: 2},{name: '测试30',id: 3},],};},computed: {filteredList() {if (this.keyword === '') {return this.list;}return this.list.filter(item => item.name.includes(this.keyword));},filteredList1() {if (this.keyword === '') {return this.list1;}return this.list1.filter(item => item.name.includes(this.keyword));},},methods: {highlightKeyword(text) {if (!this.keyword) {return text;}const regex = new RegExp(`(${this.keyword})`, 'gi');return text.replace(regex, '<span style="color: red;">$1</span>');},filterList() {// 当关键词变化时，重新过滤列表// 可以根据需求调整触发的时机，如在用户输入结束后再触发过滤// 这里使用input事件实时响应用户输入},},};
</script>

这篇关于uniapp多组数组 搜索高亮效果demo（整理）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---