概述
在我们使用vue+element-ui开发web应用的时候，有的时候从数据库中获取到的数据包含换行符n或者<br>标签,当直接使用{{text}}的形式在网页显示数据时往往不能够解析出n和<br>,例如下面的例子：
all是从服务器端返回的字典列表，里面的text字段含有n换行符，当在页面直接写{{all.text}}时，页面如下：
虽然没有看到n，但是却没有换行，实际上那些空格地方就是n。
在{{all.text}}所在的标签里添加style="white-space: pre-line"就可以解决这个问题，如图：
另外一个字段content中含有<br>标签，采用上面的方法是不行的，例如{{all.content}}标签里加上style,页面还是会显示出<br>:
解决方法是不能使用{{}}进行数据的展示，而是v-html,例如<span v-html="all.content"></span>,页面显示正常：
最后
以上就是刻苦棒球为你收集整理的vue+element-ui处理文本中的\n和《br/》的全部内容，希望文章能够帮你解决vue+element-ui处理文本中的\n和《br/》所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复