Vue/Nuxt

【Vue/Nuxt】改行含む文字列を画面(HTML)に出力する方法!

あきぞらです。

Vueで開発をしていて、改行を(\n、\rなど)含む値を画面に表示させたい場面がありました。

今回はその方法について紹介していきます。

v-htmlと<br>を使って表示させる

Vueには、HTMLとして出力を行うv-htmlがあります。

これと<br>を利用して、HTMLとして出力させることができます。

<template>
  <h2 v-html="exampleText.replace(/\n/g,'<br/>')"></h2>
</template>

上の例で、exampleTextに改行を含む文字列が入っているとします。

まず、replaceを使って改行文字を<br>に変換し、

v-htmlに渡してあげることで、改行された状態で画面に渡すことができます。

-Vue/Nuxt

Copyright© あきぞらてっく , 2021 All Rights Reserved Powered by AFFINGER5.