界面：
搜索 “成功”
附上代码（开箱即用）
<template><div class="box"><input class="input-box" v-model="searchKeyword" placeholder="输入搜索关键字" /><div class="result-box" v-for="item in highlightedResultList" :key="item.value"><div class="result">名称：<span v-html="highlightedText(item.name)"></span></div><div class="result">类别：{{ item.label }} </div><div class="result" v-html="highlightedText(item.infos)"></div></div></div>
</template><script>
export default {data () {return {searchKeyword: '',resultList: [{value: 1,name: '成长的机遇',label: '励志',infos:'在人生的漫长旅程中，没有彩排，每一个瞬间都是现场直播。我们无法预知未来会发生什么，但我们可以把握当下，用勇气和决心去书写属于自己的精彩篇章。无论前方的道路是平坦还是崎岖，我们都要坚定地迈出每一步。当遇到困难时，不要退缩，因为那是成长的机遇；当遭遇挫折时，不要气馁，因为那是成功的前奏。相信自己的能力，勇敢地去追求梦想，让生命在奋斗中绽放出绚丽的光彩。',},{value: 2,name: '生活从来都不是一帆风顺',label: '成长',infos:'生活从来都不是一帆风顺的，即使道路坎坷不平，车轮也要前进；即使江河波涛汹涌，船只也要航行。在逐梦的道路上，我们会遇到各种各样的挑战和困难，但这正是考验我们毅力和勇气的时候。不要害怕失败，因为失败是成功之母；不要畏惧困难，因为困难是成长的阶梯。只要我们怀揣着坚定的信念，勇往直前，就一定能够克服一切障碍，到达成功的彼岸。',},{value: 3,name: '关于努力',label: '成长',infos: '每一次努力，都是成长的积累；每一次挑战，都是进步的阶梯。在人生的道路上，我们不断地挑战自我，超越自我。每一次的努力都不会白费，它会在我们的生命中留下深深的印记，成为我们前进的动力。当我们面对困难时，不要轻易放弃，要相信自己的能力，坚持不懈地去努力。只有经历了风雨的洗礼，我们才能更加坚强；只有经过了磨砺的人生，才会更加精彩。让我们用汗水和努力，铸就辉煌的人生。',},{value: 4,name: '你远比自己想象的更强大',label: '感悟',infos:'不要因为一时的困难而停下脚步，因为你远比自己想象的更强大。生活中总会有不如意的时候，但这并不代表我们无法克服。在困境中，我们要学会挖掘自己的潜力，激发自己的斗志。每一个人都有无限的可能，只要我们敢于挑战，勇于拼搏，就一定能够创造出属于自己的奇迹。朝着目标奋进，无论前方有多少艰难险阻，都要坚定地走下去。在这个过程中，我们会收获成长，收获成功，绽放出璀璨的光芒。',}]};},computed: {highlightedResultList () {const keyword = this.searchKeyword;if (!keyword) return this.resultList;return this.resultList.map(item => {const highlightedName = this.highlightedText(item.name);const highlightedInfos = this.highlightedText(item.infos);return { ...item, name: highlightedName, infos: highlightedInfos };});},},methods: {highlightedText (text) {const keyword = this.searchKeyword;if (!keyword) return text;const regex = new RegExp(keyword, 'gi');return text.replace(regex, `<span style="color: red;font-weight:bold;">${keyword}</span>`);},},
};
</script>
<style scoped >
.box {margin: 20px 15%;
}
.input-box {margin: 20px 20%;border: 1px solid #ccc;padding: 10px;
}
.result-box {border: 1px solid #ccc;padding: 10px;margin-bottom: 20px;
}
.result {margin: 5px;
}
</style>
