如何用换行符替换值并在 b-modal 中显示（带换行符）答案

【问题标题】：How to replace value with linebreak and show it in b-modal (with linebreaks)如何用换行符替换值并在 b-modal 中显示（带换行符）
【发布时间】：2022-01-09 14:28:24
【问题描述】：

我正在与BootstrapVue 合作。

我有一个string，如下所示：你好 / 我的名字 / 是 B0BBY / 你好吗？

现在我想在<b-modal> 中显示这个字符串，并用换行符替换所有/（斜杠）。我尝试了以下操作：

var newString = actualString.replaceAll(" / ", "\n")

如果我 console.log 这个 newString 它会在我的控制台中显示一个换行符。但是如果我在我的b-modal 中使用它，它不会显示换行符，而是全部在一行中。

我认为有一个非常简单的解决方案，但我想不通。感谢您帮助我！

【问题讨论】：

标签： javascript vue.js vuejs2 line-breaks bootstrap-vue

【解决方案1】：

有两种可能。如果要在 HTML 中使用 \n，则必须为父元素设置 CSS 属性 white-space: pre-line;。

或者您可以简单地将\n 替换为<br>。两者都可以。

var newString = actualString.replaceAll(" / ", "<br>")

actualString = "Hello / my name / is B0BBY / how / are you ?";
var newString = actualString.replaceAll(" / ", "\n")
console.log(newString)

document.getElementById('out').innerHTML = newString;

&lt;div id="out" style="white-space: pre-line; "&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

HTML 中的行应该用块元素（<p> 等）或<br> 分隔。更改多行文本的呈现方式（如另一个答案所示）是一种技巧，在可以直接影响 HTML 布局的正常情况下是不需要的。

字符串可以被分隔并呈现为一个数组：

<b-modal>
  <p v-for="(line, index) in lines(actualString)" :key="index">{{line}}</p>

lines 是一个方法（可以转换为过滤器或计算）：

lines: actualString => actualString.replaceAll(" / ", "\n")

【讨论】：