Vue中修改v-html引入内容的样式

Vue中修改v-html引入内容的样式

• 样式结构

样式结构

<style lang="scss" scoped>
//省略具体样式
</style>

大致结构如上，注意在结构中使用了scoped。

组件中的style如果设置为scoped，那么style不会应用到 v-html中。

如果不设置为scoped，那么会污染全局变量，导致不可知的后果。

故，在涉及到v-html的引入的时候的样式， 可以使用scss一层一层嵌套，具体用法可以查阅sass中文网或者阮一峰老师的博客–sass用法指南，优先级的存在，嵌套的样式就不会污染全局了。

然后再， 取消scoped ，就可以修改v-html引入的样式了。