vue输入框的搜索返回信息高亮显示

methods中添加

highlight(text) {
  const highlightStr = `<span class="active">${this.searchText}</span>`
  // 正则表达式 // 中间的内容都会被当作匹配字符串来使用，而不是数据变量
  // 如果需要根据数据变量动态的创建正则表达式，则手动 new RegExp
  // RegExp 正则表达式构造函数
  // 参数 1： 匹配模式字符串，它会根据这个字符串创建正则对象
  // 参数 2： 匹配模式，要写到字符串中

  const reg = new RegExp(this.searchText, 'gi')   //searchText为渲染的数据
  return text.replace(reg, highlightStr)
}

html中添加

<template>

  <div class="search-suggestion">

    <van-cell-group>

      <van-cell :title="item"

                icon="search"

                :key="index"

                v-for="(item, index) in suggestionList"

                @click="$emit('search', item)">

                <div slot="title" v-html='highlight(item)'></div>

                </van-cell>

    </van-cell-group>

  </div>

</template>