vue模糊搜索关键字变红

在Vue中实现模糊搜索关键字变红的效果，可以通过使用正则表达式和v-html指令来实现。下面是一个简单的示例：

1. 首先，你需要在Vue组件中定义一个data属性来存储搜索关键字和列表数据：

data() {
  return {
    keyword: '', // 搜索关键字
    list: ['apple', 'banana', 'orange'] // 列表数据
  }
}

2. 接下来，在模板中使用v-model指令将输入框与关键字进行双向绑定，并使用v-for指令遍历列表数据：

<input type="text" v-model="keyword" placeholder="请输入关键字">
<ul>
  <li v-for="item in list" :key="item" v-html="highlight(item)"></li>
</ul>

3. 然后，在Vue组件的methods中定义一个highlight方法，该方法使用正则表达式将匹配到的关键字用span标签包裹起来，并添加样式：

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

4. 最后，在样式表中定义.highlight类的样式，用于设置关键字高亮的样式：

.highlight {
  color: red;
  font-weight: bold;
}

通过以上步骤，当用户在输入框中输入关键字时，列表中匹配到的关键字将会被标红高亮显示。