【Vue.js】テキストを改行する

自分用にメモしましたが下記と同じです。他のやり方も紹介されています。
https://qiita.com/huigo/items/0efcf50c17b0b1ee27cb

CSS の pre-wrap で改行する

フィルターを使う手もありますが、CSS だけでhogeというデータの中身のテキストに改行処理を加えます。

Vue Template

<div class="u-pre-wrap" v-text="hoge"></div>

CSS

.u-pre-wrap {
  white-space: pre-wrap;
}

参考に書いてあるとおり、一番スマートな方法かなと思いました。汎用的なユーティリティクラス.u-pre-wrapのようなものを用意しておき、全テンプレートで使えるようにしておくと尚便利です。

white-space プロパティの使い方についてはbr タグを使わないで css だけで改行させる方法に詳しく書いています。

v-text を使わないと…

<div class="u-pre-wrap">
  {{ hoge }}
</div>

上記のようにした場合、開始タグ・終了タグと{{ hoge }}との間に改行が入ってしまうので、white-spae: pre-wrapだと余計な改行が生まれます。

<div class="u-pre-wrap">{{ hoge }}</div>

このように改行をなくせばOKですが、エディタの設定や修正者によってソースコードのどこで改行するかはよりけりになるので、v-textを使ったほうがいいでしょう。