vue模糊查询，输入一句话中间不连续的字，可以搜索到任何包含这些关键字的句子，搜索我的，可以搜索到我是一个好人的，关键字我的高亮，完整例子

好的，假设你有一个包含多个句子的数组，可以按照以下步骤进行模糊搜索：

1. 首先，在你的Vue组件中设置一个data属性来存储用户输入的模糊查询关键字，比如：

data() {
  return {
    searchKeyword: ''
  }
}

2. 然后，在你的模板中，添加一个输入框，让用户输入模糊查询关键字，并且使用v-model指令将用户输入的值绑定到searchKeyword属性上，比如：

<template>
  <div>
    <input type="text" v-model="searchKeyword">
  </div>
</template>

3. 接下来，在你的组件中添加一个计算属性，用于过滤出包含关键字的句子，比如：

computed: {
  filteredSentences() {
    if (!this.searchKeyword) {
      return this.sentences
    }
    return this.sentences.filter(sentence => {
      return sentence.toLowerCase().includes(this.searchKeyword.toLowerCase())
    })
  }
}

4. 最后，在你的模板中，使用v-for指令遍历filteredSentences数组，并且使用v-html指令将包含关键字的文本高亮显示，比如：

<template>
  <div>
    <ul>
      <li v-for="sentence in filteredSentences" :key="sentence">
        <span v-html="highlightKeyword(sentence)"></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      sentences: [
        '我是一个好人。',
        '你是一个好人。',
        '他是一个好人。',
        '她是一个好人。'
      ]
    }
  },
  computed: {
    filteredSentences() {
      if (!this.searchKeyword) {
        return this.sentences
      }
      return this.sentences.filter(sentence => {
        return sentence.toLowerCase().includes(this.searchKeyword.toLowerCase())
      })
    }
  },
  methods: {
    highlightKeyword(sentence) {
      return sentence.replace(new RegExp('(' + this.searchKeyword + ')', 'gi'), '<span class="highlight">$1</span>')
    }
  }
}
</script>

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

上述例子中，当用户输入"我的"时，可以搜索到"我是一个好人。"这个句子，并且"我的"这个关键字被高亮显示。