vue 渲染转义字符'\r' '\b'

914 阅读1分钟

现象描述: 在获取到后端数据中如果包含的有特殊转义字符,如:\r, vue是会直接把这类字符进行转义展示为对应的形式:如 空格或者换行,如果想直接展示源字符怎么办?

网上找了很多方法,例如:ES6新增的字符串方法String.raw 、pre的形式、v-html等都不行

案情还原

1.请求到的后端数据如下:

var obj = {
  "ts": "2022-05-05 14:34:41",
  "content": "login: rroooott\r",
  "itype": null
}

2.vue渲染数据

<template>
    <div class="table-content">
        <h1>{{obj[0].content}}</h1>
    </div>
</template>

3.展示结果 发现\r未显示 通过调试查看 发现已被转义未换行或空格 image.png

解决方法 JSON.stringify

<template>
    <div class="table-content">
        <h1>{{obj[0].content}}</h1>
    </div>
</template>

image.png