Vue.js - 如何在 html 页面中打印包含换行符的字符串变量（从过滤器返回）

Question

我对 vue.js 很陌生，我正在尝试实现一个简单的代码，该代码在 html 页面中打印包含换行符的字符串（从过滤器返回）。我已经尝试使用 \n 和 来生成字符串，但它不起作用，因此浏览器在同一行中打印字符串的内容。

这是 vue.js 中的过滤器

 myFilter (withBreakLine){

 let string_array = ['Hi', 'my', 'friend'];
 let Result;

 if (withBreakLine) {

   for (let i = 0; i <= string_array.legth-1; i++) {
       Result = Result + '\n' + string_array[i];
   }

 } else {

   for (let i = 0; i <= string_array.legth-1; i++) {
       Result = Result + ' ' + string_array[i];
   }

 }

 return Result;

}

在 HTML 中，使用以下代码：

<span>{{0 | myFilter }} </span>

我预计：

Hi my friend

相反，使用以下代码：

<span>{{1 | myFilter }} </span>

我预计：

Hi 
my 
friend

我该如何解决？提前致谢！

Answer 1

无需诉诸可怕的 v-html方法，您可以直接将样式应用于white-space: pre-wrap跨度。

<span style="white-space: pre-wrap">{{ 1 | myFilter }}</span>