如何用換行符替換值並在 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")