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

Question

我正在与 BootstrapVue 合作。

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

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

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

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

我认为有一个非常简单的解决方案，但我想不出来。谢谢你帮我！

Answer 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;

<div id="out" style="white-space: pre-line; "></div>

Answer 2

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

字符串可以分离并呈现为数组：

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

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

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

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

How to replace value with linebreak and show it in b-modal (with linebreaks)

javascript

line-breaks

vue.js

vuejs2

bootstrap-vue