Vue/Nuxt

【Vue.js】改行を含む文字列をHTML上で反映させる方法!

あきぞらです。

Vue.jsで開発をしていて、

改行を含む文字列をHTML上で反映したい場面に遭遇しました。

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

改行を含む文字列をtemplate上で出力させる

たとえば。以下のようなVueファイルに、textという変数があったとします。

textという変数をHTML上で出力させています。

<template>
    <div>
      <span>
        {{ text }}
      </span>
    </div>
</template>

<script>
    export default {
        data() {
              return {
                 text: "aaaa\nbbbb\ncccc"
              }
        }
    }
</script>

この場合、「aaaa bbbb cccc

のような感じでHTML上に出力されてしまいます。

CSSを修正して解決する

CSSの設定で解決できることがあります。

以下のCSSを設定してみましょう。

<template>
  <div>
    <!-- クラスを追加 -->
    <span class="css-test">
      {{ text }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
        text: "aaaa\nbbbb\ncccc"
      }
   }
}
</script>

<style scoped>
/* これを設定 */
.css-test {
  white-space: pre-wrap;
}
</style>

これで改行されて表示されるはずです。

-Vue/Nuxt

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