Vue3 v-html ディレクティブ

Vue3 組み込みディレクティブ

v-htmlディレクティブは要素の innerHTML を更新し、コンテンツを生の HTML としてレンダリングします。

基本説明

v-htmlディレクティブは、バインドした式の値を HTML として要素に挿入します。これは、リッチテキストコンテンツをレンダリングする必要がある場合に非常に便利です。

  • 期待される型: string
  • 機能: 要素の innerHTML を更新し、生の HTML をレンダリングします。

使用シーン

1. リッチテキストコンテンツのレンダリング

サーバーから HTML コンテンツを取得し、レンダリングする必要がある場合：

例

<template>
  <div>
    <h2>記事の内容</h2>
    <article v-html="articleContent"></article>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleContent: `
        <h3>Vue.js とは</h3>
        <p>Vue.js はプログレッシブな JavaScript フレームワークです。</p>
      `
    }
  }
}
</script>

セキュリティ警告

セキュリティ問題任意の HTML を動的にレンダリングすると、XSS（クロスサイトスクリプティング）攻撃を引き起こす可能性があります。v-html のコンテンツが信頼できるものであることを必ず確認し、ユーザーが送信したコンテンツには決して v-html を使用しないでください。

v-text との違い

ディレクティブ機能例
v-textコンテンツをプレーンテキストとして扱うv-text="'test'" 表示 <b>test</b>
v-htmlコンテンツを HTML として解析するv-html="'test'" 表示 test（太字）

Vue3 組み込みディレクティブ

その他の拡張機能