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 scoped style will not be applied to v -html internally, because that part of HTML is not processed by 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

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

<style scoped>
.product-content {
    ...
    /deep/ h4 {
      color: #333;
      ...
    }
  }
</style>

[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!