コンテンツにスキップ

Top

Vue で マスタッシュ 内 の変数の HTML タグ が エスケープされる

変数 hoge = "おはよう<br>ございます"<div> {{ hoge }} </div> みたいな感じで表示させようとすると、そのままの文字列で表示されてしまう。

おはよう<br>ございます

これは意図したものではなく、

おはよう
ございます

と出てほしい。

そうするためには昔のVueだと

<div>{{{ hoge }}}</div>

と三重カッコにすればよかったが、Vue2以降はエラーになる。

Vue2以降は、 v-html というのを使って、

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

という感じにしないといけない。

要素を属性に移動させるって、、、。かなり変な仕様変更。
三重かっこのほうがわかりいいのに。

以上!