【Vue.js】HTMLのレンダリング(v-html)

Javascript用フレームワーク「Vue.js」でHTMLをレンダリング(表示・展開)する方法をソースコード付きでまとめました。

HTMLのレンダリング(表示・展開)

Javascript用フレームワーク「Vue.js」でHTMLをレンダリング(表示・展開)します。
HTMLをレンダリングしたい場所には、v-html属性を追加します。

<div v-html="title"></div>

サンプルコード

サンプルプログラムのソースコードです。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<!-- Vue.js の読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>

<div id="app">
  <div v-html="title"></div>
</div>

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

./js/main.js

var app = new Vue({
  el: '#app', // IDセレクタ(#app)
  data: {
    title:  '<h1 style="color:red">アルトリア</h1>',
  }
});
関連ページ
1 【Vue.js入門】使い方・サンプル集
2 Javascript入門 サンプル集
3 Node.js入門
関連記事