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

Vue.JS

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

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

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

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

出力結果

{{hogehoge}}

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

v-htmlディレクティブを使う

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

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

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

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

おすすめVueJS本

Vue.js 3 超入門 | 掌田津耶乃 | 工学 | Kindleストア | Amazon
Amazonで掌田津耶乃のVue.js 3 超入門。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
基礎から学ぶ Vue.js | MIO | 工学 | Kindleストア | Amazon
AmazonでMIOの基礎から学ぶ Vue.js。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

コメント

タイトルとURLをコピーしました