Help us understand the problem. What is going on with this article?

Vue.jsのpug templateで途中で改行を入れたい場合

問題点

Vue.jsでtemplateはpugでも書くことができてタグを書くのは楽になりますが、styleなど複数のプロパティを設定したいときに改行できずに困ったときの対応方法です。

<template lang="pug">
//- どんどん横に伸びていく・・・
.component(
  :style="{ width: $data.width + 'px', height: $data.height + 'px' }"
)
</template>

解決方法

あんまり知られていないですが、pugは後ろに\を入れると改行してもコンパイル時には同じ行とみなしてくれるので、これを入れることで適切な場所に改行を入れることができます。

<template lang="pug">
//- \で改行を入れられる!
.component(
  :style="{\
    width: $data.width + 'px',\
    height: $data.height + 'px',\
  }"
)
</template>

まとめ

pugの場合は\を入れることで途中で改行できて、classとかstyleのバインディング時にみやすくなるように適切に改行を入れることができました。
可読性が上がると思うので是非使ってみてください。

wintyo
team-lab
最新のテクノロジーを活用したシステムやデジタルコンテンツの開発を行うウルトラテクノロジスト集団
https://www.team-lab.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away