The string in the vue project is displayed in a new line (the returned data contains '\r\n' characters)
In the vue project, the data obtained by requesting the back-end interface is a whole string, such as: '1, and acceleration and environment,\r\n2, whether the technology has progressed,\r\n3, the story is wrong'
(The data is random, please don’t get entangled (~~))
We hope that the text data in this format will be displayed in a new line in the interface, as follows:
1、和加速度和环境，
2、技术的进步是否，
3、讲述的就是不对
But in the vue project, the newline character '\r\n' cannot be recognized when the data is rendered
Processing method:
first define a string data
var str = '1、和加速度和环境，\r\n2、技术的进步是否，\r\n3、讲述的就是不对'
1. Get the data and process the string data first, and use the replace() function or split().join() to process the data; the
replace() function processing method:
str.replace(/\\r\\n/g, '<br/>')
A wave of explanations: regular global search for '\r\n' characters, and replace them with 'br' tags (there is a reason for replacing them with br tags, explained below) The processing method of the split() function
:
split(/\\r\\n/g).join('<br/>')
Use the split() function to search for '\r\n' characters and cut them into arrays. The data we get is in arr format, and arr[0] is '1, and acceleration and environment,', so you need to use join () to resplice and insert the 'br' tag character.
2. Render the str data into the component:
get the data:
var data = str.replace(/\\r\\n/g, '<br/>')
Rendered into the component:
<div v-html="data"></div>
emphasize! emphasize! emphasize! Use v-html here!
Stepping on the pit record (remember to take a look at it, it is very important!):
1. Stepping on the regular judgment:
when using the regular judgment, stepped on several pits, and when using the replace() function to process, one way of writing is str.replace(/ \r\n/g, '
'), this writing is effective when compiling in the Google browser console, but it is invalid when running in the vue project.
Therefore, you need to use a more rigorous regular method. The \ in the string is a special character, and the search needs to be escaped. In the regular rule, the field that needs to be escaped must be preceded by a slash, so it needs to be written as **/\r
\ The format of n/g**, /g means regular global judgment.
2. The reason for using br tag replacement:
the string data returned by the backend, the newline character is **\r\n**, when rendering at the front end, you will find that it cannot be recognized when the string is rendered directly, and some Friends will find that \n can also wrap lines, such as rendering strings directly in labels. However, in the vue project, when using {
{}} in the tag to render variable data, the newline cannot be recognized.
Similarly, it is unrecognizable to use {
{}} to render variable data after replacing the br tag, so the v-html method should be used instead of {
{}} to render.
end
If there is any mistake, please point it out!
If you have other ways to achieve it, you can point it out!
If it is helpful to you, remember to like it (~~)