vue中换行符不换行、不生效的处理(\n或者＜br＞)

先看一段代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="app">{{msg}}</d

文章共708字 · 阅读需要大约3分钟

一键AI生成摘要，助你高效阅读

问答

编程界明世隐

42288人浏览 · 2021-03-10 20:10:46

编程界明世隐 · 2021-03-10 20:10:46 发布

引言：偶然发现vue中换行符\n、 不换行、不生效

先看一段代码

<!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:'这是一个消息\n这是另外一个消息',
            }
        })
    </script>
</html>

页面效果：

并没有我们要的换行效果，msg中有\n也不行

解决方案(style="white-space: pre-wrap;")

<span style="white-space: pre-wrap;">{{msg}}</span>

此时是可以换行的

如若是br呢，会怎么样的效果呢

<!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:'这是一个消息<br>这是另外一个消息',
            }
        })
    </script>
</html>

页面效果：

被当做字符直接渲染到页面上了，也未能达到换行的效果

处理方案：

1.用v-html来处理

（因为用的是 ，所以这句style="white-space: pre-wrap;"可以省略）

<!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:'这是一个消息<br>这是另外一个消息',
            }
        })
    </script>
</html>

2.用过滤器来处理，将 替换成\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:'这是一个消息<br>这是另外一个消息',
            },
            filters:{
            	lineBreak:function(data){
            		return data.replace(/<br>/g,'\n');
            	}
            }
        })
    </script>
</html>