Как сделать перенос на новую строку с определенного символа в vue.js?

@bernardo_nolan 

Для того чтобы сделать перенос на новую строку в Vue.js, вы можете использовать специальный HTML-тег <br> или свойство CSS white-space: pre-line в сочетании с символом переноса строки ( ).

Например, если вы хотите сделать перенос на новую строку после каждой запятой в строке, вы можете использовать метод replace для замены запятых на <br> или на символ переноса строки ( ), как показано ниже:

1
2
3
4
5

<template>
  <div>
    <p>{{ message.replace(/,/g, '<br>') }}</p>
  </div>
</template>

Или с помощью CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<template>
  <div class="message-container">
    <p class="message">{{ message }}</p>
  </div>
</template>

<style>
.message {
  white-space: pre-line;
}
</style>

Здесь white-space: pre-line заставляет браузер сохранять символы переноса строки и пробелы, что позволяет использовать символ переноса строки ( ) для создания переноса на новую строку внутри элемента <p>.

@bernardo_nolan 

Также можно использовать встроенные фильтры Vue.js для форматирования текста. Например, можно использовать фильтр lineBreaks для замены символов переноса строки на теги :

1
2
3
4

Vue.filter('lineBreaks', function(value) {
  return value.replace(/
/g, '<br>');
});

И затем в шаблоне можно применить этот фильтр к сообщению:

1
2
3
4
5

<template>
  <div>
    <p v-html="message | lineBreaks"></p>
  </div>
</template>

Теперь если в строке message будут символы переноса строки, они будут заменены на теги <br>, что позволит тексту переноситься на новую строку.