[英]How to replace value with linebreak and show it in b-modal (with linebreaks)
I'm working with BootstrapVue
.我正在使用
BootstrapVue
。
I have a string
like following: Hello / my name / is B0BBY / how / are you?我有如下
string
:你好/我的名字/是 B0BBY/你好吗/你好吗?
Now I want to show this string in a <b-modal>
and replace all /
(Slash) with a linebreak.. I've tried following:现在我想在
<b-modal>
中显示这个字符串,并用换行符替换所有/
(斜杠)。我尝试了以下操作:
var newString = actualString.replaceAll(" / ", "\n")
If I console.log
this newString
it shows in my console with a linebreak.如果我
console.log
这个newString
它会在我的控制台中显示一个换行符。 But if I'm using it in my b-modal
it shows not with a linebreak, it's all in one line.但是,如果我在我的
b-modal
中使用它,它不会显示换行符,而是全部在一行中。
I think there is a pretty simple solution for it, but I can't figure it out.我认为有一个非常简单的解决方案,但我无法弄清楚。 Thanks for helping me out!
谢谢你的协助!
There are two possibilities.有两种可能性。 If you want to use
\n
in your HTML, you have to set a CSS property white-space: pre-line;
如果你想在你的 HTML 中使用
\n
,你必须设置一个 CSS 属性white-space: pre-line;
for the parent element.为父元素。
Or you can simply replace \n
with <br>
.或者您可以简单地将
\n
替换为<br>
。 Both are possible.两者都是可能的。
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>
Lines in HTML are supposed to be separated with block elements ( <p>
, etc) or <br>
. HTML 中的行应该用块元素(
<p>
等)或<br>
分隔。 Changing the way multiline text is rendered (as another answer shows) is a hack that is not needed under normal circumstances when HTML layout can be directly affected.当 HTML 布局可以直接受到影响时,更改多行文本的呈现方式(如另一个答案所示)是一种在正常情况下不需要的技巧。
The string can be separated and rendered as an array:可以将字符串分隔并呈现为数组:
<b-modal>
<p v-for="(line, index) in lines(actualString)" :key="index">{{line}}</p>
Where lines
is a method (can be converted to a filter or a computed):其中
lines
是一种方法(可以转换为过滤器或计算):
lines: actualString => actualString.replaceAll(" / ", "\n")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.