接口返回字符转包含 \n 时,页面渲染不会换行

描述:

接口返回数据字符串,使用插值语法 {{ text }} 渲染到页面时,内容的换行未生效。

解决:

使用 white-space: pre-line;

<template>
  <div style="white-space: pre-line;">{{ text }}</div>
</template>

<script>
export default {
  data() {
    return {
      text: '第一卷\n经营商业企业之一般规则\n第一编\n商业企业主',
    };
  },
};
</script>

文档:

MDN white-space

posted @ 2024-01-19 17:37  Li_pk  阅读(137)  评论(0)    收藏  举报