introduction ： By chance vue Middle newline \n,<br> nowrap , No effect
Let's take a look at the code first
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head>
<body> <div id="app"> <span>{{msg}}</span> </div> </body> <script
src="../vue.js"></script> <script> var vm = new Vue({ el: '#app', data: {
msg:' This is news \n This is another piece of news ', } }) </script> </html>
Page effect ：
There's no line feed we want ,msg Among them \n Not at all
Solution (style="white-space: pre-wrap;")
<span style="white-space: pre-wrap;">{{msg}}</span>
At this point, you can wrap the line
If so br What about it , What will be the effect
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head>
<body> <div id="app"> <span style="white-space: pre-wrap;">{{msg}}</span>
</div> </body> <script src="../vue.js"></script> <script> var vm = new Vue({
el: '#app', data: { msg:' This is news <br> This is another piece of news ', } }) </script> </html>
Page effect ：
<br> It's rendered directly to the page as a character , It also fails to achieve the effect of line feed
Treatment plan ：
1. use v-html To deal with it
（ Because it is <br>, So this sentence style="white-space: pre-wrap;" It can be omitted ）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head>
<body> <div id="app"> <span v-html='msg'></span> </div> </body> <script
src="../vue.js"></script> <script> var vm = new Vue({ el: '#app', data: {
msg:' This is news <br> This is another piece of news ', } }) </script> </html>
2. Use a filter to deal with it , take <br> replace with \n
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head>
<body> <div id="app"> <span style="white-space: pre-wrap;">{{msg |
lineBreak}}</span> </div> </body> <script src="../vue.js"></script> <script>
var vm = new Vue({ el: '#app', data: { msg:' This is news <br> This is another piece of news ', }, filters:{
lineBreak:function(data){ return data.replace(/<br>/g,'\n'); } } }) </script>
</html>
Technology