vue2 搜索高亮关键字

界面:
搜索 "成功"
附上代码(开箱即用)
javascript 复制代码
<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>
相关推荐
蜚鸣3 天前
Vue的快速入门
vue
吃饭最爱4 天前
⽹络请求Axios的概念和作用
vue
魂尾ac4 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
是罐装可乐4 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞5 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52145 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
小胖墩有点瘦6 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台
小圣贤君6 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
知识分享小能手6 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
@AfeiyuO7 天前
分类别柱状图(Vue3)
typescript·vue·echarts