Last-Modified: 2022/05/23

Vue.jsでのエスケープ【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsでのエスケープについて、簡単に解説していきます。

エスケープする

Vue.jsでのHTMLのエスケープの方法は簡単です。

プロパティを{{ }}で囲うことでHTMLがエスケープされます。

<div id="app">
  {{ message }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '<span>ほげ</span>'
  }
})
</script>

上記の例では、messageというプロパティの値のHTMLがエスケープされます。

エスケープしない(2.0以降)

HTMLをエスケープしない方法もあります。

2.0以降の場合、v-htmlにプロパティをセットします。

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

<script>
new Vue({
  el: '#app',
  data: {
    message: '<span>ほげ</span>'
  }
})
</script>

上記のコードでは、v-htmlを書いたdiv要素にHTMLがエスケープされずに表示されます。

エスケープしない(1.x以前)

1.x以前はHTMLのエスケープをしない方法が異なります。

方法は非常にシンプルで、{}を一つ増やして、{{{ }}}で囲います。

{{{ message }}}

上記のコードの例では、messageというプロパティの値のHTMLがエスケープされません。

• facebook
• Tweet
• Read Later