vue搜索关键字高亮

要实现在 Vue 中搜索关键字并高亮显示，可以按照以下步骤操作：

1. 在 Vue 组件中定义一个 data 属性，用于存储搜索关键字和需要搜索的数据列表。例如：

data() {
  return {
    keyword: '',
    dataList: [
      'Vue.js',
      'React.js',
      'Angular.js',
      'Ember.js'
    ]
  }
}

2. 在模板中使用 v-model 指令绑定搜索框的值，并使用 v-for 指令循环渲染数据列表。例如：

<input type="text" v-model="keyword">
<ul>
  <li v-for="item in dataList" :key="item" v-html="highlight(item)"></li>
</ul>

3. 在 Vue 组件中定义一个方法，用于高亮显示搜索结果。该方法接收一个字符串参数，返回一个字符串，其中搜索关键字使用 span 标签包裹并设置样式。例如：

methods: {
  highlight(text) {
    if (!this.keyword) {
      return text
    }
    const regex = new RegExp(`(${this.keyword})`, 'gi')
    return text.replace(regex, '<span class="highlight">$1</span>')
  }
}

4. 在样式表中定义高亮样式，例如：

.highlight {
  background-color: yellow;
}

这样，在用户输入关键字时，模板会自动更新展示匹配的数据，并将搜索关键字高亮显示。