vue3 - json檔案的字串處理

在json文件中偶爾會遇到字串內建換行符號，例如\n，這時候有幾種方式可以在模板中直接讓顯示的文字跟著換行

//json
{
  "message": "Hello,\nthis is my first post!\nPlease follow"
}

<template>
  <div>
    <p class="multiline">{{ jsonData.message }}</p>
  </div>
</template>

<script setup>
import jsonData from "../" 

</script>

1. 設置元素的 white-space 為 pre-line

   可解析 \n 並自動換行。

   <style>
   .multiline {
     white-space: pre-line; 
   }
   </style>

2. 替換\n 為 <br> 標籤

這個方式要用 v-html

<template>
  <div>
    <p v-html="formattedMessage"></p>
  </div>
</template>

<script setup>
import jsonData from "../" 
const formattedMessage = computed(() => {
    return jsonData.message.replace(/\n/g, '<br>');
})
</script>

pre-line的用法