vue模糊查询并且高亮

### 回答1：
如果你想在 Vue 中进行模糊查询并且高亮匹配的文本，可以使用 `v-html` 指令和正则表达式来实现。下面是一个示例：

<template>
  <div>
    <input type="text" v-model="searchInput">
    <ul>
      <li v-for="item in filteredList" v-html="highlight(item)"></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange', 'kiwi', 'grape'],
      searchInput: ''
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.includes(this.searchInput))
    }
  },
  methods: {
    highlight(text) {
      if (!this.searchInput) {
        return text
      }
      const pattern = new RegExp(this.searchInput, 'gi')
      return text.replace(pattern, '<span class="highlight">$&</span>')
    }
  }
}
</script>

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

在模板中，我们使用 `v-html` 指令来渲染带有 HTML 标记的文本。然后使用 `highlight()` 方法来将匹配的文本用 `<span>` 标记包裹起来，加上高亮样式。这里使用了 `$&` 来表示匹配的文本。

在样式中，我们定义了 `.highlight` 样式来设置高亮的背景颜色。

需要注意的是，这种方法需要输入框的值是没有 HTML 标签的，否则会有安全漏洞。

### 回答2：
Vue模糊查询并且高亮通常可以通过以下步骤来完成。

1. 在Vue组件中，定义需要查询的数据列表和查询关键字数据。可以使用`data`属性来定义这些数据。

2. 创建一个计算属性来过滤查询结果。在该计算属性中，使用JavaScript的`filter`方法，通过遍历数据列表，检查是否包含查询关键字来过滤数据。例如：

  computed: {
    filteredData() {
      return this.dataList.filter(item => item.includes(this.searchKeyword))
    }
  }

3. 在页面上使用`v-for`指令来显示过滤后的数据。例如：

  <ul>
    <li v-for="item in filteredData" v-html="highlightText(item)"></li>
  </ul>

4. 创建一个方法来高亮查询关键字。该方法接收一个字符串作为参数，然后使用`replace`方法来替换字符串中的关键字为带有高亮样式的关键字。例如：

  methods: {
    highlightText(text) {
      return text.replace(new RegExp(this.searchKeyword, 'gi'), '<span class="highlight">$&</span>')
    }
  }

5. 在CSS中定义`highlight`样式，为高亮文本提供不同的样式。

通过以上步骤，Vue模糊查询并且高亮功能就可以实现了。当用户输入查询关键字时，页面会实时更新显示过滤后的数据，并将查询结果中的匹配关键字进行高亮显示。

### 回答3：
Vue模糊查询并且高亮可以通过在Vue中使用computed属性和正则表达式来实现。

首先，在Vue的data中定义一个用于存储查询结果的数组，并在input框中使用v-model指令将输入值绑定到data中的一个变量上。

然后，定义一个computed属性，用于实时监听input框中的输入值变化，并根据输入值来筛选并高亮匹配的结果。可以使用filter方法对原始数据进行筛选，并使用replace方法和正则表达式来替换匹配的文本为带有高亮样式的文本。

最后，在模板中使用v-for指令遍历computed属性中的结果数组，并将每个匹配到的结果渲染到页面上。

下面是一个示例代码：

<template>
  <div>
    <input type="text" v-model="searchText" placeholder="输入关键词">
    <ul>
      <li v-for="item in searchResult" :key="item.id" v-html="item.highlightedText"></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      dataList: ['apple', 'banana', 'cherry', 'durian']
    }
  },
  computed: {
    searchResult() {
      const regex = new RegExp(this.searchText, 'gi');
      return this.dataList.filter(item => item.match(regex)).map(item => {
        return {
          id: item.id,
          text: item,
          highlightedText: item.replace(regex, '<span class="highlight">$&</span>')
        }
      });
    }
  }
}
</script>

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

在样式中，我们为高亮文本指定了一个黄色的背景色，可以根据需要进行自定义修改。以上代码将根据用户输入的关键词实时筛选dataList中的数据，并将匹配到的结果使用高亮样式渲染到页面上。