vue实现多个关键字高亮，返回多个结果的模糊查询

在Vue中实现多个关键字高亮、返回多个结果的模糊查询，可以使用正则表达式和Vue的computed计算属性来实现。

首先，将要查询的关键字以数组的形式保存下来，例如：

data() {
  return {
    keywords: ['Vue', '多关键字', '模糊查询'],
    articles: [
      {
        title: 'Vue实现多关键字高亮和模糊查询',
        content: '...'
      },
      {
        title: '使用Vue开发多关键字搜索功能',
        content: '...'
      },
      ...
    ]
  }
}

接下来，使用computed计算属性来实现模糊查询和关键字高亮：

computed: {
  filteredArticles() {
    let articles = this.articles
    let keywords = this.keywords
    if (keywords.length > 0) {
      let regex = new RegExp(keywords.join('|'), 'gi')
      articles = articles.filter(article => {
        return article.title.match(regex) || article.content.match(regex)
      })
      articles = articles.map(article => {
        article.title = article.title.replace(regex, '<span class="highlight">$&</span>')
        article.content = article.content.replace(regex, '<span class="highlight">$&</span>')
        return article
      })
    }
    return articles
  }
}

上述代码中，先将要查询的关键字拼接成正则表达式，使用`|`作为分隔符，然后调用`match()`方法进行模糊匹配，将匹配到的文章进行关键字高亮处理，最后返回匹配到的文章数组。

最后，在模板中遍历`filteredArticles`数组，将文章渲染到页面上：

<template>
  <div>
    <div v-for="article in filteredArticles" :key="article.id">
      <h2 v-html="article.title"></h2>
      <p v-html="article.content"></p>
    </div>
  </div>
</template>

在CSS中定义`.highlight`样式，用于显示高亮效果：

.highlight {
  color: red;
  font-weight: bold;
}