解决vue3中设置的v-html的代码样式不生效的问题

在Vue 3中，由于安全性考虑，v-html指令默认不会解析内部的样式。如果你尝试使用v-html来插入带有内嵌样式的HTML字符串，这些样式不会应用到Vue模板中。

解决方法：

1. 使用内联样式：如果你需要设置元素的样式，不要使用外部的CSS类，而是直接在元素上使用style属性。
2. 使用全局样式：如果你必须使用外部CSS，可以通过全局样式文件确保你的样式能够影响到v-html内部的内容。
3. 使用DOM内部样式：在v-html插入的内容中直接添加<style>标签，其中包含需要应用的样式。
4. 使用DOM内部scoped样式：如果你在单文件组件中使用v-html，并希望样式只影响v-html内容，可以在<style>标签上使用scoped属性，然后在v-html内容中添加特定的类来应用这些样式。
5. 使用content属性：如果你是想通过CSS的::before和::after伪元素插入内容，并且使用v-html来插入内容，你可以使用content属性的attr()或data()函数来插入内容。
6. 使用第三方库：例如DOMPurify，这是一个用于清理HTML以防止XSS攻击的库，同时它也可以用来修复v-html不能正确应用样式的问题。

示例代码：

// 安装DOMPurify
npm install dompurify
 
// 在组件中使用
import { ref } from 'vue';
import DOMPurify from 'dompurify';
 
export default {
  setup() {
    const dirtyHtml = ref('<div class="example">Dirty <b>HTML</b></div>');
    const cleanHtml = ref('');
 
    // 清理并配置HTML内容
    cleanHtml.value = DOMPurify.sanitize(dirtyHtml.value, {
      FORCE_BODY: true, // 确保内容被添加到body，以便样式生效
    });
 
    return {
      cleanHtml
    };
  }
};

在模板中使用时：

<div v-html="cleanHtml"></div>

请注意，在使用第三方库时，应当只对可信的HTML内容进行处理，以防止XSS攻击。