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

こんにちは!のせっち@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の組み合わせでいけますね!
下記の記事で解説していますので合わせてどうぞ!

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。