vue模糊查询列表数据，输入不连续的字，可以查询到包含这些所有字的列表，关键字高亮，完整举例

好的，我可以给你提供一个简单的例子：

假设我们有一个包含多个城市名的列表，我们想要实现模糊查询功能。当用户输入城市名的一部分时，我们希望能够展示包含该部分的所有城市，并将用户输入的关键字进行高亮显示。

我们可以通过以下步骤来实现这个功能：

1. 在页面中添加一个输入框，用来接收用户输入的关键字。

2. 监听输入框的输入事件，并将用户输入的内容作为参数发送到后台进行查询。

3. 在后台进行模糊查询，并返回匹配的结果列表。

4. 在前端将查询结果展示在页面上，同时将用户输入的关键字进行高亮显示。

下面是一个简单的 Vue 组件实现示例：

<template>
  <div>
    <input type="text" v-model="keyword" @input="search" placeholder="请输入城市名">
    <ul>
      <li v-for="city in cities" v-html="highlight(city)"></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      cities: [],
    }
  },
  methods: {
    search() {
      // 发送请求查询包含关键字的城市
      axios.get('/api/cities', { params: { keyword: this.keyword } })
        .then(response => {
          this.cities = response.data
        })
        .catch(error => {
          console.log(error)
        })
    },
    highlight(city) {
      // 将关键字高亮显示
      const reg = new RegExp(this.keyword, 'gi')
      return city.replace(reg, '<span style="color: red">$&</span>')
    },
  },
}
</script>

在这个例子中，我们监听了输入框的 `input` 事件，并在输入框中绑定了一个 `v-model` 指令来实现双向数据绑定。当用户输入关键字时，我们会发送一个 GET 请求到后台，并将关键字作为参数传递给后台进行模糊查询。查询结果返回后，我们将结果列表渲染到页面上，并使用 `v-html` 指令将城市名中包含关键字的部分进行高亮显示。

需要注意的是，在 `highlight` 方法中，我们使用了正则表达式来匹配关键字，并使用了 `<span>` 标签来实现高亮显示。