vue3使用v-html实现文本关键词变色

在Vue 3中，您可以使用自定义指令来实现文本关键词的变色。以下是一个简单的例子：

1. 定义一个自定义指令 v-text-color：

const vTextColor = {
  mounted(el, binding) {
    const text = el.textContent;
    const pattern = binding.value; // 关键词
    const regExp = new RegExp(pattern, 'gi');
    const replacedText = text.replace(regExp, match => {
      return `<span style="color: red;">${match}</span>`;
    });
    el.innerHTML = replacedText;
  },
  updated(el, binding) {
    el.innerHTML = el.textContent.replace(binding.value, match => {
      return `<span style="color: red;">${match}</span>`;
    });
  }
};

2. 在Vue应用中注册这个自定义指令：

const app = Vue.createApp({});
 
app.directive('text-color', vTextColor);
 
app.mount('#app');

3. 在模板中使用这个自定义指令：

<div v-text-color="'关键词'">这是一段包含关键词的文本，关键词将会变成红色。</div>

这样就可以实现文本中指定的关键词变色显示。注意，这个例子中的关键词是硬编码的，您可以根据需要将其绑定到组件的数据属性上。