Vue.js v-htmlディレクティブ

Vue.js
スポンサーリンク

Vue.jsのお勉強。

マスタッシュ構文({{・・・}})では全てプレーンテキストとして扱われるため、HTMLとして表示したい場合には v-htmlディレクティブを使用します。

※注意:XSS脆弱性のため、信頼できる情報のみに設定すること。ユーザからの入力値などには決して使用しないこと。

サンプルはこちら

以下、ソース。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>VueJS</title>
</head>
<body>
  <div id="app">
    <p>
    {{ message1 }}
    </p>
    <p v-html="message2">
    </p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    message1: 'v-htmlなし:Hello <span style="color: red">Vue.js!<span>',
    message2: 'v-htmlあり:Hello <span style="color: red">Vue.js!<span>'
  }
})

コメント