vue中“\n“的解析展示与传输问题

  • 后端获取到的字符串带"\n"
    返回示例:"this.ruleForm.position : 【与必游景点的距离】\n• 天安门: 约15.7公里\n• 圆明园: 约12.9公里\n• 八达岭长城: 约52.4公里\n【与附近其他景点的距离】\n• 石景山游乐园: 约343米"
    1.首先需要将"\n“替换成”<br>":
    this.ruleForm.position = this.ruleForm.position.replace(/\\n/g, "<br>")
    2.用v-html解析(插值表达式和v-text都会将该返回值解析为文本格式)
    <p v-html="ruleForm.position"></p>

  • 前端传递数据时需要拼接"\n"
    1.通过\进行转义,拼接"\\n":
    this.ruleForm.position = positionSwim+"\\n"+ positionNearby
    2.还可以使用标签包裹要传的内容:
    "<prev>" + this.ruleForm.position = positionSwim+"\n"+ positionNearby + "</prev>"

猜你喜欢

转载自blog.csdn.net/weixin_41545048/article/details/112278719