HTML中如何保留字符串的空白符和换行符号的效果

有个字符串  储值门店{{thing3.DATA}}\n储值卡号{{character_string1.DATA}}\n储值金额{{amount4.DATA}}\n当前余额{{amount5.DATA}}\n储值时间{{time2.DATA}}  ，

HTML中想要保留 \n的换行效果的有下面3种方法：

1、style 中 设置 white-space: pre-line; 

<div style="white-space: pre-line;">储值门店{{thing3.DATA}}储值卡号{{character_string1.DATA}}储值金额{{amount4.DATA}}当前余额{{amount5.DATA}}储值时间{{time2.DATA}}
</div>

2、加<pre>标签

<pre>储值门店{{thing3.DATA}}储值卡号{{character_string1.DATA}}储值金额{{amount4.DATA}}当前余额{{amount5.DATA}}储值时间{{time2.DATA}}
</pre>

3、\n替换成 <br/> 然后使用 v-html ,这个方法不建议

完成效果如图：