Einführung in die Methode zum Hinzufügen von bereichsbezogenen Stilen zum von v-html in Vue.js gerenderten Dom

Dieser Artikel bietet Ihnen eine Einführung in die Methode zum Hinzufügen von Bereichsstilen zum von V-HTML in Vue.js gerenderten Dom. Er hat einen gewissen Referenzwert und Freunde in Not können darauf zurückgreifen Ich hoffe, es hilft dir.

In vue.js können Sie zum Rendern einer Zeichenfolge in HTML den Befehl v-html verwenden.

Aber der V-HTML-Abschnitt in der offiziellen Dokumentation erinnert

auch daran, dass in einer einzelnen Dateikomponente der Stil von scoped nicht innerhalb von v-html angewendet wird Dieser Teil des HTML-Codes wird vom Vorlagen-Compiler von Vue nicht verarbeitet. Wenn Sie bereichsbezogenes CSS für den Inhalt von v-html festlegen möchten, können Sie es durch CSS-Module ersetzen oder manuell eine BEM-ähnliche Bereichsstrategie mit einem zusätzlichen globalen
Der obige Code wird kompiliert in:
.a[data-v-f3f3eg9] .b { /
... / } Einige Präprozessoren wie Sass analysieren >>> nicht richtig. In diesem Fall können Sie stattdessen den /deep/-Operator verwenden – dies ist ein Alias ​​für >>> und funktioniert genauso gut.

Beispiel

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

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

[Verwandte Empfehlungen:

JavaScript-Video-Tutorial]

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zum Hinzufügen von bereichsbezogenen Stilen zum von v-html in Vue.js gerenderten Dom. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!