vue中input输入关键字要把整个页面的关键字变成红色

您可以使用 computed 属性来检测输入关键字，并将其包含在一个 span 标签中，使其变为红色。例如：

<template>
  <div>
    <input v-model="keyword" />
    <div v-html="highlightedContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac dapibus nibh. Duis eget felis at lacus malesuada varius. Donec ullamcorper, ligula vitae sagittis dapibus, mauris eros vestibulum ipsum, nec dictum augue mauris vel nisl. Fusce sollicitudin velit et augue auctor, ut faucibus purus elementum. Quisque at quam ut arcu efficitur interdum. Sed ac justo auctor, varius mi in, maximus odio. Sed fermentum, est at interdum luctus, sapien augue fringilla tortor, ut blandit metus ex vel nibh. Sed metus nibh, finibus eu metus sit amet, varius convallis purus. Nullam ut pretium nulla. Sed in risus at enim bibendum pharetra. Sed eleifend elit et felis commodo lacinia.',
      keyword: ''
    }
  },
  computed: {
    highlightedContent() {
      const regex = new RegExp(this.keyword, 'gi');
      const highlighted = this.content.replace(regex, '<span style="color:red;">$&</span>');
      return highlighted;
    }
  }
}
</script>

在上面的代码中，我们首先定义了一个 `content` 属性，其中包含一些文本内容。然后我们定义了一个 `keyword` 属性，它绑定到输入框中的值。在计算属性 `highlightedContent` 中，我们使用正则表达式来检测输入的关键字，并将其包含在一个 span 标签中，使其变为红色。最后，我们在模板中使用 `v-html` 指令来显示高亮的内容。

请注意，使用 `v-html` 指令可以将 HTML 字符串渲染为实际的 HTML 元素，但这也可能导致安全问题。在实际应用中，请确保您信任输入的内容，并且遵循最佳的安全实践。