vue中换行符不换行、不生效的处理(\n或者＜br＞)_\n 换行符不生效_编程界小明哥的博客

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

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

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

此时是可以换行的

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

<!DOCTYPE html>
        <meta charset="UTF-8">
        <title></title>
    </head>
        <div id="app">
       	   <span style="white-space: pre-wrap;">{{msg}}</span>
    </body>
    <script src="../vue.js"></script>
    <script>
       var vm = new Vue({
            el: '#app',
            data: {
              msg:'这是一个消息<br>这是另外一个消息',
    </script>
</html>

页面效果：

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

处理方案：

1.用v-html来处理

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

<!DOCTYPE html>
        <meta charset="UTF-8">
        <title></title>
    </head>
        <div id="app">
       	   <span v-html='msg'></span>
    </body>
    <script src="../vue.js"></script>
    <script>
       var vm = new Vue({
            el: '#app',
            data: {
              msg:'这是一个消息<br>这是另外一个消息',
    </script>
</html>

2.用过滤器来处理，将<br>替换成\n

<!DOCTYPE html>
        <meta charset="UTF-8">
        <title></title>
    </head>
        <div id="app">
       	   <span style="white-space: pre-wrap;">{{msg | lineBreak}}</span>
    </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>

标签定义了一个作用域插槽，并将description字段中的HTML标签渲染到插槽中。这样，我们就可以在el-table表格中实现换行了。在el-table表格数据中需要换行的地方，可以使用字符串拼接的方式，在需要换行的位置插入。在 Vue 2 中，可以使用。在html 中可以直接使用换行，但是小程序wxml 中使用无效，可以换成\n 注意: 一定要注意，text 中 \n才能生效，view里边直接写\n不行日常踩坑填坑，我们一起吧！作者v: codejs 在 vue 项目，有时请求返回的数据中会有含有 \n 的字符串，如果直接渲染的话无法实现换行。一、通过 css属性实现：设置 white-space: pre-wrap;二、使用v-html实现：首先，将字符串里的 \n 替换为，然后用 v-html 指令渲染字符串为 innerHTML 。三、标签：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和 换行符 。 vue 项目中字符串换行显示（返回的数据包含‘\r\n’字符）在 vue 项目中，请求后端接口获取到的数据是一整条字符串，如：‘1、和加速度和环境，\r\n2、技术的进步是否，\r\n3、讲述的就是不对’ （数据是随意的，各位大佬别纠结（~~））这种格式的文本数据我们希望在界面中展示是换行的，如下： 1、和加速度和环境， 2、技术的进步是否， 3、讲述的就是不对但是在 vue 项目中，数据渲染时无法识别 换行符 ‘\r\n’ 处理方法：先定义一个字符串数据 var str = '1、和加速度和环境，\r\n2 连续的空白符会被合并， 换行符 会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。 nowrap 和 normal 一样，连续的空白符会被合并。但文本内的换行无效。连续的空白符会被保留。在遇到 换行符 或者元素时才会换行。 pre-wrap 连续的空白符会被保留。在遇到 换行符 ...