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>'
}
})
コメント