小程序中如何正确使用换行符\n

507 阅读1分钟

大家都知道,在html中,如果你内容里面有包含\n的话,是会换行的,但是在小程序里面,如果你写在view标签中的话,是不会自动换行的,那要怎么办呢,很简单,小程序只有两个标签既然view不行,那就用text咯,试了一下果然可以

<view>第一行\n第二行</view>
// 第一行\n第二行

<text>第一行\n第二行</text>
//第一行
//第二行

但是,你以为就这么简单吗,这可是小程序,肯定会有坑在里面(狗头

没错,我就刚好遇到了,最近在做个活动页,里面的活动规则是从接口返回来的,大概长这样:

{
    data: {
        rule: '1.规则第一行\n2.规则第二行'
    },
    status: 200
}

一顿基本的赋值操作后页面显示出来了,但是不管我用view还是text标签,页面上都是显示1.规则第一行\n2.规则第二行,这个就很纳闷了,为什么从接口获取的就失效,在页面上写死的数据就有效呢?

后来通过一番思索后,觉得可能是从接口获取的话,会把它当成一个整体的字符串了,用filter处理一下,把\n转化一下(该小程序是用uni-app框架的,所以有filter,如果用原生写的话就要采用其他方式了)

<view>{{rule | formatRule}}</view>

filters: {
    formatRule(val) {
        return val.raplace(/\\n/g,'\n')
    }
}

完事~