[Vue.js] white-space: pre-wrap するときは v-text を使おう

CSSの white-space: pre-wrap を使うと、このスタイルの当たった要素の中の空白はそのまま出力されます。
https://developer.mozilla.org/ja/docs/Web/CSS/white-space

<p style="white-space:pre-wrap;">
　吾輩わがはいは猫である。名前はまだ無い。
　どこで生れたかとんと見当けんとうがつかぬ。
</p>

Vue.jsでもこれは同様で、空白をそのまま反映したい場合は white-space: pre-wrap を使います。

<p style="white-space:pre-wrap;">{{ wagahai }}</p>

このとき、気を利かせて改行したりすると、textには含まれない余分な空白が出力されてしまいます。

<!-- NG -->
<p style="white-space:pre-wrap;">
  {{ wagahai }}
</p>

こういうときは、 v-text の出番です！
https://jp.vuejs.org/v2/api/#v-text

v-text は、要素のtextContentに、指定された値を代入します。

したがって、↓のように余分な空白が含まれている場合にも、空白の影響を受けることはありません。

<!-- 空白が含まれてもOK -->
<p style="white-space:pre-wrap;" v-text="wagahai">

</p>

v-text って、用途不明なディレクティブだったんですが、こういう使い道があったんですね