開発者ドキュメント

Vueアプリで生のHTMLをレンダリングする

それほど頻繁ではありませんが、文字列として格納された生のHTMLをDOMに挿入する必要がある理由が実際にある場合があります。 もちろん、めったにありません。 ほとんどの場合、これを行うべきではありません。これにより、さまざまなXSS攻撃が発生する可能性があります。 やや有効なユースケースは、( shudders )が長い間忘れられていたサーバールームの古いデータベースにデータと混合されたHTMLを保存する古代のレガシーシステムの新しいフロントエンドコンポーネントを作成している場合です。一部のリース施設の北部。 その場合、アプリで生のHTMLをレンダリングする必要があるかもしれません。

それでは始めましょう。 まず最初に、正規表現スキルを解き放ちます…

冗談だ。 レガシーシステムに対応するためだけに、既知の宇宙の運命を危険にさらしたくはありません。

とにかく、Vueは私たちのためにこれらすべてを処理できる素敵な小さなディレクティブを提供してくれることがわかりました。 予想通り、それは呼ばれています v-html.

これを使用するには、データモデル内のHTML文字列への参照をに渡します v-html コンポーネントテンプレートでは、次のようになります。

<template>
  <div v-html="legacySystemHTML">
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Just like JSX! Oh wait...
      legacySystemHTML: `
        <FONT color="#faddad" size="-2">
          <MARQUEE>Please enter your name to continue.</MARQUEE>
          ...
        </FONT>
      `
    }
  }
}
</script>

そして、まさにそのように、HTMLがコンポーネントにレンダリングされます。 更新した場合 legacySystemHTML プロパティの場合、HTMLはそれに応じて更新されます。

悪くない!


また、ここに少し関連した秘密があります。 あなたは使用することができます v-text 要素のテキストコンテンツのみを設定することを除いて、同じ方法でプロパティを設定します。

口ひげの表現を使用できるのに、なぜそれを使用するのかわかりません({{ componentInnerText }})代わりに、しかしそれはそこにあります!

モバイルバージョンを終了