Vue动态改变列表搜索出关键词的字体颜色

Vue安夏

已于 2023-05-06 11:08:58 修改

阅读量461

点赞数 1

文章标签： vue.js 前端

于 2023-04-19 13:31:56 首次发布

本文链接：https://blog.csdn.net/fitnesssnail/article/details/130241949

版权

这里需求是将keyword的文字内容更改颜色，突显出来

 brightKeyword(val) {

        let keyword = this.$route.params.keyWord?this.$route.params.keyWord:'';

        keyword = keyword.trim();

        if (keyword && keyword.length > 0) {

          if (keyword == val) {

            return '<span style="color: #007cbb;">' + val + "</span>";

          }

          keyword = keyword.replaceAll(" ", "|");

          let reg = new RegExp(keyword, "ig");

          return val.replace(reg, (match) => {

            return '<span style="color: #007cbb;">' + match + "</span>";

          });

        }

    },