【Pug】配列の中身をhtmlとして出力する方法【1分】

投稿日 2021年3月14日
著者のせっち
カテゴリープログラミング

こんにちは！のせっち@nosecchi01です。

each文などで、配列に入れた要素を順番に取り出す際に、htmlタグとして取り出したいんだけど？というケースがあると思います。その方法を解説します。

codepenを見ながら解説

早速、正解を見ていただきます。

See the Pen Pug 配列の中身をhtmlのまま出力する by Yuki Nose (@yukinouz1) on CodePen.

配列var itemsに入れた配列の中身にhtml(span)などを書いています。

通常配列の中身は#{item}で展開しますが、そうすると中身がエスケープされるので、!{item}とすることでhtmlタグとして出力することができます！

.contents
  - var items = ['通常のテキストです','<span class="font-weight-bold">ここは太字になります</span>', '<span class="color-red">赤字になります</span>']
  ul
  each item, index in items
    li item#{index} !{item} // !を付けるとエスケープされない

Vue(Nuxt)で書く場合は、v-forとv-htmlの組み合わせでいけますね！
下記の記事で解説していますので合わせてどうぞ！