Introduction to the method of adding scoped styles to the dom rendered by v-html in Vue.js

This article brings you an introduction to the method of adding scoped styles to the dom rendered by v-html in Vue.js. It has certain reference value and friends in need can refer to it. I hope it helps you.

In vue.js, to render a string into html, you can use the v-html directive.

But the v-html part of the official documentation also reminds

that in a single file component, the scopedstyle will not be applied tov -htmlinternally, because that part of HTML is not processedby Vue's template compiler. If you wish to set scoped CSS for the content of v-html, you can replace it with CSS Modules or manually set a BEM-like scoping strategy with an additional global
The above code will be compiled into:
.a[data-v-f3f3eg9] .b { / .. ./ }
Some preprocessors like Sass cannot parse >>> correctly. In this case you can use the /deep/ operator instead - this is an alias for >>> and will work just as well.

Example

[Related recommendations:JavaScript video tutorial]

The above is the detailed content of Introduction to the method of adding scoped styles to the dom rendered by v-html in Vue.js. For more information, please follow other related articles on the PHP Chinese website!