vue输入不连续的关键字可以搜索到相关内容，并且高亮

您可以使用 Vue.js 中的 computed 属性和正则表达式来实现输入不连续的关键字搜索和高亮显示相关内容。具体实现方法如下：

1. 在 data 中定义一个名为 keyword 的变量，用来存储用户输入的关键字。

2. 在模板中使用 v-model 指令将用户输入的关键字绑定到 keyword 变量上。

3. 在 computed 中定义一个名为 filteredItems 的计算属性，用来筛选出与关键字匹配的内容。

4. 在 filteredItems 计算属性中使用正则表达式来匹配关键字，并将匹配到的结果用 span 标签包裹起来，以实现高亮显示。

以下是一个示例代码：

<template>
  <div>
    <input type="text" v-model="keyword" />
    <ul>
      <li v-for="(item, index) in filteredItems" :key="index" v-html="item"></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      items: [
        "Vue.js",
        "React.js",
        "Angular.js",
        "Ember.js",
        "Backbone.js",
        "Knockout.js"
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        new RegExp(this.keyword, "i").test(item)
      ).map(item => item.replace(new RegExp(this.keyword, "gi"), "<span class='highlight'>$&</span>"));
    }
  }
};
</script>

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

在上面的代码中，我们使用了一个名为 items 的数组存储要搜索的内容。在 filteredItems 计算属性中，我们使用 filter 方法对 items 数组进行筛选，只保留与关键字匹配的项。然后，我们使用 map 方法将匹配到的结果用 span 标签包裹起来，并为其添加一个名为 highlight 的 CSS 类，以实现高亮显示。最后，我们在模板中使用 v-html 指令将过滤后的结果渲染到页面上。