vue实现搜索后列表关键字高亮

<template>
  <div>
    <input v-model="keywords" type="text" placeholder="搜索关键字">
    <ul>
      <li v-for="item in highlighted" :key="item.id">
        <span v-html="item.title">span>
      li>
    ul>
  div>
template>

<script>
export default {
  data() {
    return {
      keywords: '',
      list: [
        { id: 1, title: 'Vue.js 开发实践' },
        { id: 2, title: 'Vue 3 基础教程' },
        { id: 3, title: '深入浅出 React 技术栈' }
      ]
    }
  },
  computed: {
    highlighted() {
      return this.list.map(item => {
        const regex = new RegExp(this.keywords, 'gi')
        const title = item.title.replace(regex, match => `${match}`)
        return { ...item, title }
      })
    }
  }
}
script>

<style scoped>
.highlight {
  color: red;
  font-weight: bold;
}
style>