个人技术集锦

全部栏目

首页操作系统后端开发数据库前端开发移动端开发

您的当前位置：首页正文

模板字符串中如何换行展示

2024-12-02 来源：个人技术集锦

场景

在使用模板字符串时，常常会遇到需要换行展示的情况，然而仅仅在模板字符串里面使用<br>或者\n是行不通的，一般换行有以下两种做法。

解决

1. 使用<br>，搭配v-html

const text=`当前修改后分辨率为${formData.resolution}P，帧率为${formData.fps}fps<br> 是否确认修改?`

<div style="flex-direction: column">
  <div v-html="text"></div>
</div>

2. 使用\n，搭配style="white-space:pre-line"

const text=`当前修改后分辨率为${formData.resolution}P，帧率为${formData.fps}fps\n 是否确认修改?`

<div style="flex-direction: column">
   <div style="white-space:pre-line">{{text}}</div>
</div>

显示全文