Vue 插值换行

背景

有段文字类似下面这样：

[00:00.000] 作词 : 姚若龙\n[00:00.047] 作曲 : 光泽\n[00:00.94]空心\n[00:03.94]词：姚若龙\n[00:06.94]曲：G.Z光泽\n[00:14.27]热爱曾是唯一的信仰\n[00:18.90]相互凝望让对方捆绑\n[00:25.62]在那时候简单的好傻\n[00:32.48]却又空前绝后快乐啊\n[00:39.55]直到现实狠狠推一把\n[00:46.49]跌到浑身是伤疤\n[00:52.71]你在欲望面前投降\n[01:00.04]我在伤痛后面成长\n[01:06.90]终于知道爱都有翅膀\n[01:19.02]怎么拥抱它终究要飞翔\n[01:24.82]漆黑空心也想被释放\n[01:31.89]奈何思念比恨更顽强\n[01:40.47]有个怀抱暖得像张床\n[01:48.03]有份善良微笑多晴朗\n[01:54.91]有一张唇美丽又疯狂\n[02:02.64]为何爱谁心都空荡荡\n[02:09.22]当我听说你与他散场\n[02:15.58]狼狈回家带着伤\n[02:22.32]朋友都说那是惩罚\n[02:29.39]我的心却多么痛啊\n[02:40.04]虽然知道爱都有翅膀\n[02:46.01]因为太爱所以会原谅\n[02:53.23]漆黑空心也想被释放\n[03:01.12]奈何思念比恨更顽强\n[03:08.42]无法割舍就别怕感伤\n[03:13.86]我也嫌我对你太滚烫\n[03:20.43]深爱就像一种命一样\n[03:27.42]没有任何方法能阻挡\n[03:35.93]就算知道爱都有翅膀\n[03:41.48]还是愿意让你停靠在我肩膀\n[03:50.50]你也不用把我当作家\n[03:57.34]把我当成一棵树吧\n

如果 Vue 直接插值显示会直接显示 \n 字符，并没有换行。

解决方法

将 view 容器的 white-space 属性值设置为 pre-wrap 即可。

// css 部分
.lyric-wrapper {
			white-space: pre-wrap;
		}

// html 部分
<view class="lyric-wrapper">
			{{lyric}}
		</view>

pre-wrap 值的意思是保留空白并且正常换行。