Vue.js 3の学習メモ③

投稿者:rajanoonカテゴリー:未分類タグ:、

v-htmlの使い方

プレーンなHTMLを挿入するためのディレクティブ。

どんなとき

指定した要素のinnerHTMLを更新したいとき。

メリット

dataオブジェクトをHTMLとして表示できる。(通常はクロスサイトスクリプティング対策で、HTMLとしては認識されないようになっている。)

実装してみた

  • index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-html="message"></p>
        <p>{{ message }}</p>
    </div>
    <script src="https://unpkg.com/vue@3.1.5"></script>
    <script src="js/main.js"></script>
</body>
</html>
  • js/main.js
const app = Vue.createApp({
    data: function() {
        return {
            message: 'Hello <span style="color:red;">World!</span>'
        }
    }
})
app.mount('#app')

ブラウザで開いてみた。

v-htmlが<p>タグにあるほうは、HTMLとして扱われている。

あんまり利用する機会はなさそうに思う。

注意点

クロスサイトスクリプティング(XSS)に注意しないといけない。

ユーザーが入力する箇所には絶対に使わない。

投稿者: rajanoon

1993年生まれ。新卒からSEとして働いていましたが、今はサーバーサイドエンジニアとして働いています。一生使える技術を身に着けようと悪戦苦闘中です。

コメントを残す