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

Для этого можно использовать тег <pre>.

Например, если у вас есть строка str, равная something \n new line, вы можете написать

{{ str }}

И, как и ожидалось, вы получите

something
 new line

Answer 2

Не прибегая к ужасному v-html, вместо этого вы можете просто применить стиль white-space: pre-wrap к диапазону.

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