vue搜索关键词高亮前端效果_几个词条显示前端效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_24612793/article/details/105950455

本文介绍了如何在Vue项目中实现搜索关键词高亮显示的效果，包括html模板的使用和搜索函数的调用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、实现效果

二、html(简单版) 内容要用v-html展示

        <div
          v-for="(item, index) in searchRe"
          :key="index"
          v-show="showList"
          style="margin-bottom:38px"
        >
          <div class="search_results_tit" v-html="item.tittle"></div>
          <div class="search_results_con" v-html="item.content">...</div>
        </div>

三、点搜索调用函数部分

    searchResult() {
      let that = this;
      that.searchRe = [];  //注意一定要清空数组
      if (this.search == "") {
        this.$message({
          message: "请输入搜索内容",
          type: "warning"
        });
        this.searchMenu = true;
        return;
      } else {
        this.searchMenu = false;
        this.listLoading = true;
        let _data = { tittle: this.search };
        $.ajax({
          url: host.basic.basicUrl + "/document/searchDocument",
          data: _data,
          success: function(data) {
            if (data.code == "0") {
              let tar = data.obj;//这是接口拿到的搜索返回数据
              tar.forEach(item => {
                if (
                  item.tittle.indexOf(that.search) > -1 ||
                  item.content.indexOf(that.search) > -1
                ) {
                  that.searchRe.push(item);
                }
              });
              if (that.searchRe.length <= 0) {
                that.showList = false;
              } else {
                that.showList = true;
              }
              that.searchRe.map(item => {
                item.tittle = that.brightKeyword(item.tittle);
                item.content = that.brightKeyword(item.content);
              });
            }
            that.lengthCount = that.searchRe.length;
            that.listLoading = false;
          }
        });
      }
    },
//这是高亮部分的样式替换函数
    brightKeyword(val) {
      let keyword = this.search;
      if (val.indexOf(keyword) !== -1) {
        return val.replace(keyword, `<font color='#E3504A'>${keyword}</font>`);
      } else {
        return val;
      }
    }