v-html

2024 5/11

2023.08.04 2024.05.11

記事の内容

v-html

v-htmlは、エスケープ処理されずにHTML要素を表示されるために利用されます。

記法

[ HTML ] =============================
　<要素名 v-html=”データプロパティ名”>
[ Vue.js ] =============================
　data() {
　　return {
　　　データプロパティ名 : <要素名>文字列や数値</要素名>;
　　};
　}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-htmlについて</title>
  </head>
  <body>
    <div id="app">
      <p v-html="message"></p>
    </div>

    <script src="./js/html.js"></script>
  </body>
</html>

Vue.createApp({
  data() {
    return {
      message: `<p>こんにちは、トモジです！</p>
      <img src="画像のURL"/>`,
    };
  },
}).mount("#app");

出力結果

v-htmlを使用しなかった場合

vue.jsは、スクリプトを入力された場合に自動的にエスケープ処理(全て文字列へと変換)をして無毒化してくれます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-htmlを使用しなかった場合</title>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>

    <script src="./js/html.js"></script>
  </body>
</html>

Vue.createApp({
  data() {
    return {
      message: `<p>こんにちは、トモジです！</p>
      <img src="画像のURL"/>`,
    };
  },
}).mount("#app");

出力結果

<p>こんにちは、トモジです！</p> <img src=”画像のURL”/>