Introduction à la méthode d'ajout de styles étendus au dom rendu par v-html dans Vue.js

Cet article vous présente une introduction à la méthode d'ajout de styles étendus au dom rendu par v-html dans Vue.js. Il a une certaine valeur de référence et les amis dans le besoin peuvent s'y référer. j'espère que cela vous aidera.

Dans vue.js, pour restituer une chaîne en HTML, vous pouvez utiliser la commande v-html.

Mais la section v-html de la documentation officielle rappelle également

que dans un seul composant fichier, le style de scoped ne sera pas appliqué à l'intérieur de v-html à cause de cette partie HTML n'est pas traitée par le compilateur de modèles de Vue. Si vous souhaitez définir une portée CSS pour le contenu de v-html, vous pouvez le remplacer par des modules CSS ou définir manuellement une stratégie de portée de type BEM avec un élément global
Le code ci-dessus sera compilé dans :
.a[data-v-f3f3eg9] .b { / ... / }
Certains préprocesseurs comme Sass n'analysent pas correctement >>> Dans ce cas, vous pouvez utiliser l'opérateur /deep/ à la place - il s'agit d'un alias pour >>>

Exemple

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

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

[Recommandations associées : Tutoriel vidéo JavaScript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!