Textarea提交折行文本,如何实现前端换行显示

13,521次阅读
没有评论

共计 283 个字符,预计需要花费 1 分钟才能阅读完成。

前端需要输入简单的长文本,但是又不想引入繁重的富文本编辑器,于是使用原生的 Textarea 文本组件。在“项目背景”栏输入两行文本,通过回车换行

提交给后端的数据格式如下,可以看到两行文本中间是 回车符号

这样的文本在前端显示的时候是不能换行的,我们知道在 HTML 中换行是通过
标签来使用的。于是我们需要将后端传过来的文本通过正则过滤转换下。

在 Vue 中,我们写一个 filters 过滤器

filters: {textareaFormat: function(text) {return text.replace(/n|rn/g, '
') } }

然后在模板中使用该过滤器,就可以达到想要的换行效果

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于1970-01-01发表,共计283字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)