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

可以通过在input的v-model绑定一个变量，然后使用computed属性监听该变量的变化，再通过遍历整个页面节点，找到所有包含该关键字的节点，将它们的样式设置为红色。具体代码如下：

HTML部分：

<template>
  <div>
    <input type="text" v-model="keyword" />
    <div ref="page" class="page">
      <!-- 页面节点 -->
    </div>
  </div>
</template>

JS部分：

<script>
export default {
  data() {
    return {
      keyword: '', // 输入的关键字
    };
  },
  computed: {
    // 监听关键字变化
    highlightKeyword() {
      const page = this.$refs.page;
      const keyword = this.keyword;
      if (page && keyword) {
        const nodes = page.querySelectorAll('*'); // 获取所有节点
        for (let i = 0; i < nodes.length; i++) {
          const node = nodes[i];
          const nodeText = node.textContent.toLowerCase();
          if (nodeText.includes(keyword.toLowerCase())) {
            node.style.color = 'red'; // 匹配的节点设置为红色
          } else {
            node.style.color = ''; // 恢复原来的颜色
          }
        }
      }
    },
  },
};
</script>

这里使用了querySelectorAll方法获取所有节点，然后遍历每个节点，通过textContent获取节点的文本内容，判断是否包含关键字，再通过style属性设置节点的样式。需要注意的是，如果关键字为空，需要将所有节点的样式恢复为原来的颜色。