Vue.js の v-html でレンダリングされた dom にスコープ付きスタイルを追加する方法の紹介

この記事では、Vue.js の v-html でレンダリングされた dom にスコープ付きスタイルを追加する方法を紹介します。一定の参考値があり、必要な友人はそれを参照できます。それがあなたに役立つことを願っています。

vue.js では、文字列を HTML にレンダリングするために、v-html ディレクティブを使用できます。

ただし、公式ドキュメントの v-html 部分では、単一のファイル コンポーネントでは

scoped スタイルが ## に適用されないことも に注意しています。 #v -html 内部的には、HTML のその部分は Vue のテンプレート コンパイラによって処理されないためです。 v-html のコンテンツにスコープ付き CSS を設定したい場合は、CSS モジュールで置き換えるか、追加のグローバル <style> 要素を使用して BEM のようなスコープ戦略を手動で設定できます。 公式ドキュメントで提供されている解決策に加えて、より簡単な方法があります:

ディープ アクション セレクター

スコープ付きスタイルのセレクターを使用できるようにしたい場合たとえば、子コンポーネントに影響を与えるなど、「より深く」作業するには、

>>>

演算子を使用できます。 <stylescoped>.a >>> .b { /
...
/ }上記のコードは次のようにコンパイルされます:
.a[data-v-f3f3eg9] .b { /
.. .
/ }Sass などの一部のプリプロセッサは >>> を正しく解析できません。この場合、代わりに /deep/ 演算子を使用できます。これは >>> のエイリアスであり、同様に機能します。
例

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

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

[関連する推奨事項:

JavaScript ビデオ チュートリアル

]

以上がVue.js の v-html でレンダリングされた dom にスコープ付きスタイルを追加する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。