使用Vue.js的v-html指令高亮匹配的关键字。

好的，下面是一个使用 Vue.js 的 v-html 指令高亮匹配关键字的示例代码：

<template>
  <div>
    <input v-model="keyword" placeholder="Search...">
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        <span v-html="highlight(item.title)"></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: [
        { id: 1, title: 'Apple' },
        { id: 2, title: 'Banana' },
        { id: 3, title: 'Cherry' },
        { id: 4, title: 'Durian' },
        { id: 5, title: 'Elderberry' },
      ],
    };
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.title.toLowerCase().includes(this.keyword.toLowerCase()));
    },
  },
  methods: {
    highlight(value) {
      if (!this.keyword) {
        return value;
      }
      const regex = new RegExp(`(${this.keyword})`, 'gi');
      return value.replace(regex, '<span class="highlight">$1</span>');
    },
  },
};
</script>

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

在这个示例中，我们使用 v-html 指令渲染了匹配关键字后的标题，并在页面中添加了一个 CSS 类来高亮匹配的关键字。在 highlight 方法中，我们使用了正则表达式来匹配关键字，并使用 replace 方法将匹配的关键字包裹在一个 span 标签中，并添加了一个 CSS 类。

需要注意的是，由于使用了 v-html 指令，因此需要确保输入的关键字是安全的，以避免 XSS（跨站脚本攻击）漏洞。可以在后端对输入的关键字进行过滤和转义，或使用第三方库如 DOMPurify 来过滤输入的内容。