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

好的，下面是一个简单的vue模糊查询列表数据的例子，包括输入不连续的字也可以查询到对应的字符串和关键字高亮的功能。在这个例子中，我们使用了一个自定义指令来实现关键字高亮的效果。

HTML代码：

<div id="app">
  <input v-model="keyword" placeholder="输入关键词">
  <ul>
    <li v-for="item in filteredItems" v-html="item"></li>
  </ul>
</div>

JavaScript代码：

Vue.directive('highlight', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el, binding) {
    let keyword = binding.value
    let reg = new RegExp(keyword, 'ig')
    let html = el.innerHTML
    el.innerHTML = html.replace(reg, `<span class="highlight">${keyword}</span>`)
  }
})

new Vue({
  el: '#app',
  data: {
    keyword: '',
    items: ['apple', 'banana', 'orange', 'watermelon']
  },
  computed: {
    filteredItems: function () {
      let keyword = this.keyword.trim().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')
      let reg = new RegExp(keyword.split('').join('.*?'), 'ig')
      return this.items.filter(item => reg.test(item)).map(item => item.replace(reg, `<span class="highlight">${keyword}</span>`))
    }
  }
})

CSS代码：

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

在这个例子中，我们通过使用computed属性来实现模糊查询功能，使用自定义指令来实现关键字高亮的效果。其中，computed属性中的过滤逻辑是通过正则表达式来实现的，可以实现输入不连续的字也可以查询到对应的字符串的功能。同时，我们还对用户输入的关键词进行了一定的处理，去除了开头和结尾的空格，并且在正则表达式中对特殊字符进行了转义，以避免出现意外的错误。