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

最新推荐文章于 2024-07-11 16:05:05 发布

编程界小明哥

最新推荐文章于 2024-07-11 16:05:05 发布

阅读量4.4w

点赞数 37

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/dkm123456/article/details/114644775

版权

vue 专栏收录该内容

16 篇文章 13 订阅

订阅专栏

引言：偶然发现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>

编程界小明哥

关注

37
点赞
踩
54

收藏

觉得还不错? 一键收藏
打赏
8
评论
vue中换行符不换行、不生效的处理(\n或者＜br＞)

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

扫一扫