vue模糊查询列表，输入不连续的字也可以查询到对应的列表项，关键字高亮，完整举例

好的，这个问题可以通过在 Vue 中使用 computed 属性来实现。首先，我们需要将用户输入的搜索关键字绑定到一个 data 属性中，比如叫做 keyword。然后，我们可以在 computed 中定义一个 filteredList 属性，这个属性可以根据用户输入的关键字来过滤原始的列表数据。

下面是一个示例代码：

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="Search...">
    <ul>
      <li v-for="item in filteredList" v-html="highlight(item.name)"></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'cherry' },
        { id: 4, name: 'durian' },
        { id: 5, name: 'elderberry' },
        { id: 6, name: 'fig' },
        { id: 7, name: 'grapefruit' },
        { id: 8, name: 'honeydew' },
        { id: 9, name: 'kiwi' },
        { id: 10, name: 'lemon' },
        { id: 11, name: 'mango' },
        { id: 12, name: 'nectarine' },
        { id: 13, name: 'orange' },
        { id: 14, name: 'papaya' },
        { id: 15, name: 'quince' },
        { id: 16, name: 'raspberry' },
        { id: 17, name: 'strawberry' },
        { id: 18, name: 'tangerine' },
        { id: 19, name: 'watermelon' }
      ]
    }
  },
  computed: {
    filteredList() {
      if (!this.keyword) {
        return this.list
      }
      const regex = new RegExp(this.keyword, 'gi')
      return this.list.filter((item) => {
        return item.name.match(regex)
      })
    }
  },
  methods: {
    highlight(text) {
      const regex = new RegExp(this.keyword, 'gi')
      return text.replace(regex, '<span class="highlight">$&</span>')
    }
  }
}
</script>

<style>
.highlight {
  background-color: yellow;
}
</style>

在这个示例中，我们首先定义了一个输入框，用户可以在该输入框中输入搜索关键字。然后，我们使用 v-for 指令来循环遍历 filteredList，这个列表是通过对原始列表数据进行过滤得到的。在循环中，我们使用 v-html 指令来显示每个列表项，并且将这些项传递给一个名为 highlight 的方法。这个方法会对搜索关键字进行高亮处理，使用一个 span 元素来包裹匹配到的关键字。

在 computed 中，我们定义了一个名为 filteredList 的属性，这个属性会根据用户输入的关键字来过滤原始的列表数据。如果用户没有输入任何关键字，我们会直接返回原始列表数据。如果用户输入了关键字，我们会使用一个正则表达式来匹配列表项的名称，并将匹配到的列表项包含在 filteredList 中返回。

最后，我们还定义了一个名为 highlight 的方法，这个方法会接收一个字符串作为参数，然后使用正则表达式来匹配搜索关键字，并将匹配到的关键字包裹在 span 元素中，以便进行高亮处理。

通过这种方式，我们就可以实现一个简单的模糊查询列表功能，用户可以输入不连续的字也可以查询到对应的列表项，同时也会进行关键字高亮处理。