Vue.JS3で波括弧を表示する方法

Vue.JSのHTMLで波括弧を表示する方法です。
波括弧は、変数の出力のために使われるので、普通に使うとバグってしまいます。

方法1 v-preをディレクティブ使う

v-preディレクティブは子要素のコンパイルを省略します。つまり、書いたまま出力されます。

<div v-pre>{{hogehoge}}</div>

出力結果

{{hogehoge}}

HTMLのpreタグと似たような働きです。

もう一つの方法は、dataメソッドで出力したい内容を指定して、v-htmlディレクティブを使ってテキストを直接出力させる方法です。

<div v-html="hoge"></div>
/*中略*/
data(){
  return{
    hoge:"{{hogehoge}}"
  }
}

ただ、v-htmlディレクティブは生のHTMLが出力されてしまうので、ユーザーが入力したデータの表示などに使うと脆弱性が発生する可能性がありますので、使用する場合は細心の注意が必要です。

基本的にv-preで対応する方が良いでしょう。

おすすめVueJS本