あきぞらです。
Vue.jsで開発をしていて、改行を（\n、\rなど）含む値を画面に表示させたい場面がありました。
今回はその方法について紹介していきます！
v-htmlと<br>を使って表示させる
Vue.jsには、HTMLとして出力を行うv-htmlがあります。
これと<br>を利用して、HTMLとして出力させることができます。
<template> <h2 v-html="exampleText.replace(/\n/g,'<br/>')"></h2> </template>
上の例で、exampleTextに改行を含む文字列が入っているとします。
まず、replaceを使って改行文字を<br>に変換し、
v-htmlに渡してあげることで、改行された状態で画面に渡すことができます。