Vue.jsで、データバインディングをマスタッシュ（Mustache）構文で{{ hoge }}のようにするとHTMLがエスケープされてしまいます。

これは、クロスサイトスクリプティングの対策としてHTMLがエスケープされるようになっています。

このエスケープをしない方法があるのでこの記事ではその方法について紹介します。

Vue.js 1系と2系により方法が違うのですが、1系では、マスタッシュ（Mustache）構文で記入しているデータバインディングを下記のようにすることでエスケープをしないで変数を表示することができます。

Vue.js 1系の場合

{{{ hoge }}}

通常は、マスタッシュ（Mustache）構文で中括弧が前後に2つずつですが、前後に3つの中括弧を設定することでHTMLをエスケープせずにデータバインディングすることが出来ます。

Vue.js 2系の場合

Vue.js 2系でHTMLをエスケープしないでデータバインディングする方法は、Vue.js 1系と異なります。
Vue.js 2系では、v-htmlディレクティブを使用します。

やり方は、簡単で上記のように記載するとHTMLをエスケープせずにデータバインディングをすることが出来ます。
上記の例では、v-htmlディレクティブを使用し、pタグに下記のように記載することで、htmlを含んだmessageのデータをバインディングしています。

<p v-html="message"></p>

上の例では、messageの中身は、

<font color="red">Hello Vue.js!</font>

なので、Hello Vue.js!が赤字でデータバインディングされていることが確認できます。

Vue.jsを使用し、HTMLをエスケープせずにデータバインディングする際には、参考にしてください。