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

好的，这里给出一个完整的例子，实现了输入不连续的字也可以查询到，并且关键字高亮显示的功能。希望能对你有所帮助。

HTML代码：

<div id="app">
  <input type="text" v-model="keyword" placeholder="请输入关键字">
  <ul>
    <li v-for="(item, index) in filteredList" :key="index" v-html="highlight(item)">
    </li>
  </ul>
</div>

Vue.js代码：

new Vue({
  el: '#app',
  data() {
    return {
      keyword: '',
      list: [
        '西安的天气很好',
        '北京的天气很冷',
        '上海的天气很热',
        '深圳的天气很湿'
      ]
    }
  },
  computed: {
    // 根据关键字过滤数据
    filteredList() {
      return this.list.filter(item => this.match(item))
    }
  },
  methods: {
    // 判断字符串是否匹配关键字
    match(text) {
      if (!this.keyword) {
        return true
      }
      const kwd = this.keyword.split('')
      let i = 0
      for (let j = 0; j < text.length && i < kwd.length; j++) {
        if (text[j] === kwd[i]) {
          i++
        }
      }
      return i === kwd.length
    },
    // 将匹配的关键字高亮显示
    highlight(text) {
      if (!this.keyword) {
        return text
      }
      const kwd = this.keyword.split('')
      let i = 0
      let html = ''
      for (let j = 0; j < text.length && i < kwd.length; j++) {
        if (text[j] === kwd[i]) {
          html += `<span class="highlight">${text[j]}</span>`
          i++
        } else {
          html += text[j]
        }
      }
      if (i < kwd.length) {
        return text
      }
      return html
    }
  }
})

CSS代码：

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

在这个例子中，我们定义了一个match方法，用来判断字符串是否匹配关键字。这个方法中，我们将关键字分割成一个个字母，然后遍历字符串中的每个字符，如果字符与关键字的当前字母相同，就将关键字的下一个字母与字符串中的下一个字符进行比较，直到关键字中的所有字母都匹配成功，或者遍历完了字符串中的所有字符。

在highlight方法中，我们使用了和之前一样的正则表达式来将匹配的关键字高亮显示。但是，由于现在的关键字不一定是连续的，所以我们需要手动遍历字符串中的每个字符，判断是否匹配关键字，并将匹配的字符用span标签包裹起来。同时，我们还需要判断是否匹配成功，如果匹配成功就返回高亮后的字符串，否则返回原始字符串。

希望这个例子能够满足你的需求。