「Vue.js」 v-htmlディレクティブ を利用サンプル
書式
<p v-html="変数名"></p>
data: {
変数名: 'htmlコード’
}
v-htmlディレクティブ を利用してhtmlコードが反映されます。
使用例
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> </head> <body> <div id="app" > <p v-html="msg"></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { msg: '<strong style="color: red;font-size:30px;">v-htmlを使用する</strong>' } }) </script> </body> </html>
結果
画面に文字「v-htmlを使用する」が定義のCSSに適応されます。