vue实现模糊查询并且高亮，搜索一句话中任意的词都可以查询到

Vue 实现模糊查询并且高亮可以通过在模板中使用 `v-html` 指令和正则表达式来实现。如果你想要搜索一句话中任意的词都可以查询到，可以使用 JavaScript 的正则表达式，例如使用 `split` 方法将输入的关键字切分成多个子串，然后使用 `join` 方法将这些子串以 `|` 连接起来，形成一个正则表达式，这样就可以匹配这些子串中的任意一个了。具体步骤如下：

1. 定义一个 computed 属性，用于过滤出匹配关键字的结果，并进行高亮处理。

computed: {
  filteredList() {
    const filterKey = this.filterKey
    if (!filterKey) {
      return this.list
    }
    const subKeys = filterKey.split(/\s+/g)
    const regExp = new RegExp(`(${subKeys.join('|')})`, 'ig')
    return this.list.map(item => {
      item.name = item.name.replace(regExp, '<span class="highlight">$1</span>')
      return item
    })
  }
}

2. 在模板中使用 `v-html` 指令，将过滤后的结果渲染到页面上。

<ul>
  <li v-for="item in filteredList" :key="item.id" v-html="item.name"></li>
</ul>

3. 在 CSS 中定义高亮样式。

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

在上面的代码中，我们首先使用 `split` 方法将关键字切分成多个子串，并使用正则表达式的 `|` 连接起来，形成一个正则表达式，然后使用 `replace` 方法将匹配到的子串替换成带有高亮样式的 HTML 标签，最后返回过滤后的列表。如果没有输入关键字，则直接返回原列表。在模板中，你只需要绑定 `filterKey` 属性即可：

<input type="text" v-model="filterKey">
<ul>
  <li v-for="item in filteredList" :key="item.id" v-html="item.name"></li>
</ul>

需要注意的是，由于使用了 `v-html` 指令，所以需要注意 XSS 攻击的风险，建议在服务器端对输入进行过滤和转义。