如何用换行符替换值并在 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>分隔。 当 HTML 布局可以直接受到影响时，更改多行文本的呈现方式（如另一个答案所示）是一种在正常情况下不需要的技巧。

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

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

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

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