VUE使用v-html获取文档后css样式不生效

官方关于v-html的解释如下:

在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。

解决方法:

1、去掉<style scoped>中的scoped，（不建议使用，会改变布局，导致组件之间样式冲突）

<style>
.content img{width:100%;height:auto;margin:.5rem auto;}
.content .contentimg{width:100%;height:auto;margin:.5rem auto;}
</style>

2、通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值

<style scoped>
.content >>> img{width:100%;height:auto;margin:.5rem auto;}
.content >>> .contentimg{width:100%;height:auto;margin:.5rem auto;}
</style>

3、如果vue项目使用less或者sass的时候，>>>可能会失效，可以使用/deep/来代替

<style scoped>
.content /deep/ img{width:100%;height:auto;margin:.5rem auto;}
.content /deep/ .contentimg{width:100%;height:auto;margin:.5rem auto;}
</style>