Vue v-html

v-html

2重中括弧のmustachesは、データをHTMLではなく、プレーンなテキストとして扱います。実際のHTMLとして出力するためには、v-htmlディレクティブを使用する必要があります。

<div id="msg">
        <p>Using mustaches: {{ rawHtml }} </p>
        <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    </div>

    <script>
    var app = new Vue({
        el: '#msg',
        data: {
            rawHtml: '<span style="color:red">This should be red.</span>'
        }
    })
    </script>