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)"></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: [
        'apple',
        'banana',
        'cherry',
        'durian',
        'elderberry',
        'fig',
        'grapefruit',
        'honeydew',
        'kiwi',
        'lemon',
        'mango',
        'nectarine',
        'orange',
        'papaya',
        'quince',
        'raspberry',
        'strawberry',
        'tangerine',
        'watermelon'
      ]
    }
  },
  computed: {
    filteredList() {
      return this.list.filter((item) => {
        return item.toLowerCase().indexOf(this.keyword.toLowerCase()) !== -1
      })
    }
  },
  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 的属性，这个属性会根据用户输入的关键字来过滤原始的列表数据。我们使用了一个 filter 方法来实现这个过滤逻辑，在 filter 方法中，我们会检查每个列表项是否包含搜索关键字。如果包含，我们就会将这个列表项包含在 filteredList 中返回。

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

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