For the text data obtained from the background, how to replace the existing text data with <br> and display it on the page to achieve line wrapping?

problem description

gets an array from the background. There are multiple items in the array and each item has a piece of text content (the text content contains n). Now you want to display the text content on the page (you can put it in the p tag or div), and replace it with
to achieve line wrapping according to the position of n in the text content.

the environmental background of the problems and what methods you have tried

I traverse the array with vue"s v-for and take the text content content in the array, output it to the page with {{}}, and use a filter filter to replace n with
, so that the page will directly display
instead of a newline effect. But then I looked back at the vue document and remembered that {{}} would interpret the data as plain text rather than HTML code, so I used v-html output instead. If you use v-html output, how to replace n in content with
display to achieve line wrapping effect?

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

May.30,2021

calculation properties will not be used?

v-html binds a calculation property and replaces \ n with
in the calculation property.
is similar to
clipboard.png

in fact, this is too troublesome. Specify white-space:pre directly with

  tag or CSS | pre-line | pre-wrap  is also good 

.
Menu