脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue关键字高亮

vue实现关键字高亮效果的示例代码

 更新时间：2024年11月28日 09:59:58   作者：叫我+V  
这篇文章主要为大家详细介绍了如何使用vue实现关键字高亮效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

这是啥子意思呢，就是类似于百度搜索，根据关键词搜索结果，搜索结果中，与关键词相同的字显示红色，仅此而已，没有什么大的功能。简单写一下demo。

环境

我使用的是 vue3 + ts 的语法来写，其实一个样儿，关键代码 js、ts 都可以，就一个方法，调用一下就可以了。

<template>
  <div class="ed-con">
    <el-input v-model="input" style="width: 240px" placeholder="Please input"/>
    <p v-html="txt"></p>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';

const input = ref('');

const txt = ref('在古老的小镇边缘，有一间被岁月温柔抚摸过的木屋，它静静地伫立在一片绚烂的野花丛中。屋内，住着一位名叫苏婉的女子，她拥有一双能洞察人心的眼睛和一头如夜色般深邃的长发。每天黄昏，苏婉都会坐在窗边，手捧一本泛黄的书，眼神时而凝重，时而温柔，仿佛在与书中人物进行着跨越时空的对话。\n' +
    '\n' +
    '某天，一阵突如其来的风雨打破了小镇的宁静，也吹散了苏婉心中的平静。一位浑身湿透的青年男子闯入了她的世界，带着一身未解之谜。苏婉望着他，眼中闪过一抹不易察觉的光芒，她知道，自己的生活从此将不再平凡。两人在雨后的木屋里，围绕着炉火，开始编织起一段关于寻找、救赎与爱的故事，而窗外的世界，正悄悄地为这段奇遇添上一抹神秘的色彩。')

</script>

<style scoped lang="scss">
.ed-con {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  ::v-deep(.ed-highlight) {
    color: red;
  }
}
</style>

上面的代码运行起来就是这样的：

接下来就是怎么实现输入框输入数据之后，下面的文字中，与关键字相同的文字高亮成红色的，很简单，就一个方法：

const highlightText = () => {
  if (!input.value) {
    return txt.value;
  }
  const regex = new RegExp(`(${input.value})`, 'gi');
  const highlightedText = txt.value.replace(regex, '<span class="ed-highlight">$1</span>');
  return highlightedText;
}

然后再调用一下这个方法就可以了：

<p v-html="highlightText()"></p>

就是把关键字给用标签包裹起来，然后给这个标签设置一个 class 样式，然后通过 css 代码，给这个 class 加上一个红色的样式，就这样：

到此这篇关于vue实现关键字高亮效果的示例代码的文章就介绍到这了,更多相关vue关键字高亮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue实现商品放大镜效果

    Vue实现商品放大镜效果

    这篇文章主要为大家详细介绍了Vue实现商品放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue.directive自定义指令的使用详解

    Vue.directive自定义指令的使用详解

    本篇文章主要介绍了Vue.directive自定义指令的使用详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • vue+highcharts实现3D饼图效果

    vue+highcharts实现3D饼图效果

    这篇文章主要为大家详细介绍了vue+highcharts实现3D饼图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 详解如何在Vue组件方法中加载和使用匿名函数

    详解如何在Vue组件方法中加载和使用匿名函数

    在Vue.js的开发过程中,组件方法的定义和调用是非常常见的,有时候,为了响应事件或其他操作,我们需要在组件的方法中使用匿名函数,本文将深入探讨如何在Vue组件的方法中加载和使用匿名函数,并提供详细的代码示例和解释,帮助开发者更好地理解和应用这些技术
    2024-09-09
  • vue报错Not allowed to load local resource的解决办法

    vue报错Not allowed to load local resource的解决办法

    这篇文章主要给大家介绍了关于vue报错Not allowed to load local resource的解决办法,这个错误是因为Vue不能加载本地资源的原因,需要的朋友可以参考下
    2023-07-07
  • vue中provide和inject的用法及说明(vue组件爷孙传值)

    vue中provide和inject的用法及说明(vue组件爷孙传值)

    这篇文章主要介绍了vue中provide和inject的用法及说明(vue组件爷孙传值)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • Vue中使用eslint和prettier格式化代码方式

    Vue中使用eslint和prettier格式化代码方式

    这篇文章主要介绍了Vue中使用eslint和prettier格式化代码方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • ant-design-vue 快速避坑指南(推荐)

    ant-design-vue 快速避坑指南(推荐)

    ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致，很多朋友在使用过程中遇到很多问题，今天小编就给大家分享一篇教程帮助大家快速闭坑，一起看看吧
    2020-01-01
  • vue中使用[provide/inject]实现页面reload的方法

    vue中使用[provide/inject]实现页面reload的方法

    这篇文章主要介绍了在vue中使用[provide/inject]实现页面reload的方法，文中给大家提到了在vue中实现页面刷新不同的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-09-09
  • Vue中如何进行数据响应式更新

    Vue中如何进行数据响应式更新

    Vue是一款流行的JavaScript框架，它提供了数据响应式更新的能力，可以让我们轻松地更新数据，并自动更新视图，本文将介绍Vue中如何进行数据响应式更新，包括使用Vue的响应式系统、使用计算属性和使用Vue的watcher,需要的朋友可以参考下
    2023-06-06

最新评论