vue将json格式的字符串格式化后输出到web界面上

<div><textarea readonly style="width: 100%;height: 600px;color: #0000FF" v-text="JSON.stringify(resdata,null,4)"></textarea>
</div>

如：

{"data":{"doc_id":334148,"doc_title":"Icon 图标","body":"\u003cdiv class=\"markdown-toc editormd-markdown-toc\"\u003e\u003cul class=\"markdown-toc-list\"\u003e\u003cli\u003e\u003ca class=\"toc-level-2\" href=\"#4o5dpm\" level=\"2\" title=\"Icon 图标\"\u003eIcon 图标\u003c/a\u003e\u003cul\u003e\u003cli\u003e\u003ca class=\"toc-level-3\" href=\"#30nyi5\" level=\"3\" title=\"使用方法\"\u003e使用方法\u003c/a\u003e\u003c/li\u003e\u003cli\u003e\u003ca class=\"toc-level-3\" href=\"#6pgbk2\" level=\"3\" title=\"图标集合\"\u003e图标集合\u003c/a\u003e\u003cul\u003e\u003c/ul\u003e\u003c/li\u003e\u003c/ul\u003e\u003c/li\u003e\u003c/ul\u003e\u003c/div\u003e\u003ch2 id=\"4o5dpm\"\u003e\u003ca name=\"4o5dpm\" class=\"reference-link\"\u003e\u003c/a\u003e\u003cspan class=\"header-link octicon octicon-link\"\u003e\u003c/span\u003eIcon 图标\u003c/h2\u003e\u003cp\u003e提供了一套常用的图标集合。\u003c/p\u003e\n\u003ch3 id=\"30nyi5\"\u003e\u003ca name=\"30nyi5\" class=\"reference-link\"\u003e\u003c/a\u003e\u003cspan class=\"header-link octicon octicon-link\"\u003e\u003c/span\u003e使用方法\u003c/h3\u003e\u003cp\u003e直接通过设置类名为 \u003ccode\u003eel-icon-iconName\u003c/code\u003e 来使用即可。例如：\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"/static/images/loading.gif\" alt=\"Icon 图标 - 图1\" data-original=\"https://static.sitestack.cn/projects/element-ui-2.15-zh/ebdebd350376db159be0a4094addc616.png\" class=\"lazy\"/\u003e\u003c/p\u003e\n\u003cpre class=\"prettyprint linenums prettyprinted\" style=\"\"\u003e\u003col class=\"linenums\"\u003e\u003cli class=\"L0\"\u003e\u003ccode\u003e\u003cspan class=\"tag\"\u003e\u0026lt;i\u003c/span\u003e\u003cspan class=\"pln\"\u003e \u003c/span\u003e\u003cspan class=\"atn\"\u003eclass\u003c/span\u003e\u003cspan class=\"pun\"\u003e=\u003c/span\u003e\u003cspan class=\"atv\"\u003e\u0026#34;el-icon-edit\u0026#34;\u003c/span\u003e\u003cspan class=\"tag\"\u003e\u0026gt;\u0026lt;/i\u0026gt;\u003c/span\u003e\u003c/code\u003e\u003c/li\u003e\u003cli class=\"L1\"\u003e\u003ccode\u003e\u003cspan class=\"tag\"\u003e\u0026lt;i\u003c/span\u003e\u003cspan class=\"pln\"\u003e \u003c/span\u003e\u003cspan class=\"atn\"\u003eclass\u003c/span\u003e\u003cspan class=\"pun\"\u003e=\u003c/span\u003e\u003cspan class=\"atv\"\u003e\u0026#34;el-icon-share\u0026#34;\u003c/span\u003e\u003cspan class=\"tag\"\u003e\u0026gt;\u0026lt;/i\u0026gt;\u003c/span\u003e\u003c/code\u003e\u003c/li\u003e\u003cli class=\"L2\"\u003e\u003ccode\u003e\u003cspan class=\"tag\"\u003e\u0026lt;i\u003c/span\u003e\u003cspan class=\"pln\"\u003e \u003c/span\u003e\u003cspan class=\"atn\"\u003eclass\u003c/span\u003e\u003cspan class=\"pun\"\u003e=\u003c/span\u003e\u003cspan class=\"atv\"\u003e\u0026#34;el-icon-delete\u0026#34;\u003c/span\u003e\u003cspan class=\"tag\"\u003e\u0026gt;\u0026lt;/i\u0026gt;\u003c/span\u003e\u003c/code\u003e\u003c/li\u003e\u003cli class=\"L3\"\u003e\u003ccode\u003e\u003cspan class=\"tag\"\u003e\u0026lt;el-button\u003c/span\u003e\u003cspan class=\"pln\"\u003e \u003c/span\u003e\u003cspan class=\"atn\"\u003etype\u003c/span\u003e\u003cspan class=\"pun\"\u003e=\u003c/span\u003e\u003cspan class=\"atv\"\u003e\u0026#34;primary\u0026#34;\u003c/span\u003e\u003cspan class=\"pln\"\u003e \u003c/span\u003e\u003cspan class=\"atn\"\u003eicon\u003c/span\u003e\u003cspan class=\"pun\"\u003e=\u003c/span\u003e\u003cspan class=\"atv\"\u003e\u0026#34;el-icon-search\u0026#34;\u003c/span\u003e\u003cspan class=\"tag\"\u003e\u0026gt;\u003c/span\u003e\u003cspan class=\"pln\"\u003e搜索\u003c/span\u003e\u003cspan class=\"tag\"\u003e\u0026lt;/el-button\u0026gt;\u003c/span\u003e\u003c/code\u003e\u003c/li\u003e\u003c/ol\u003e\u003c/pre\u003e\u003ch3 id=\"6pgbk2\"\u003e\u003ca name=\"6pgbk2\" class=\"reference-link\"\u003e\u003c/a\u003e\u003cspan class=\"header-link octicon octicon-link\"\u003e\u003c/span\u003e图标集合\u003c/h3\u003e\u003cp\u003e\u003cimg src=\"/static/images/loading.gif\" alt=\"Icon 图标 - 图2\" data-original=\"https://static.sitestack.cn/projects/element-ui-2.15-zh/2908fb19cab348bc432ebb8a85d21377.png\" class=\"lazy\"/\u003e\u003c/p\u003e\n\u003c!-- 原文：https://element.eleme.cn/#/zh-CN/component/icon --\u003e","title":"基础组件 - Icon 图标 - 《ElementUI v2.15.0 使用手册》 - 书栈网 · BookStack","bookmark":false,"view":262,"updated_at":"2021-01-19 20:24:43"},"errcode":0,"message":"ok"}

vue将json格式的字符串格式化后输出到web界面上相关推荐

javascript解析json格式的字符串，拼接后显示到表格中
知识点解析json格式的字符串拼接的HTML设置到tbody当中加载json格式的对象结果演示 html代码 <!DOCTYPE html> <html><hea ...
json格式的字符串转为json对象遇到特殊字符问题解决
中午做后台发过来的json的时候转为对象,可是有几条数据一直出不来,检查发现json里包含了换行符,造成这种情况的原因可能是编辑部门在编辑的时候打的回车造成的假设有这样一段json格式的字符串 1 ...
[转]C# 将类的内容写成JSON格式的字符串
将类的内容写入到JSON格式的字符串中本例中建立了Person类,赋值后将类中内容写入到字符串中运行本代码需要添加引用动态库Newtonsoft.Json 程序代码: using System; ...
[转载] python判断是否为json_Python判断变量是否为Json格式的字符串示例
参考链接: Python-Json 3 : python中验证是否为有效JSON数据 Python判断变量是否为Json格式的字符串示例 Json介绍全名JavaScript Object Nota ...
C#——对象转换为JSON格式的字符串
问题来源这几日正值伏天,我发现成都不是下大雨就是烈日炎炎的天气.七月上旬车子也坏掉了,去南门体育管健身房要走20来分钟,再回到研究院大楼又是20多分钟,一路上不是大雨就是烈日,还好锻炼后多巴胺让我持 ...
json格式的字符串转数组
JSON格式的字符串转数组通过后台ajax获取数据后数据列表中含有这样类型的json格式的数据转换 list:[ type "[{'ID':'1','Title':'字符串','Color ...
C# JSON格式的字符串读取到类中
2019独角兽企业重金招聘Python工程师标准>>> 将JSON格式的字符串读取到类中本例中建立JSON格式的字符串json,将其内容读取到Person类中运行本代码需要添加引 ...
PHP json_decode 对 JSON 格式的字符串进行编码并获取对应的值
关于PHP中对JSON 格式的字符串进行编码并解析,同时可使用正则来获取内容,看示例: 字符串: {"resp": {"userid": 0, "re ...
在PHP代码中处理JSON 格式的字符串的两种方法：
总结: 在PHP代码中处理JSON 格式的字符串的两种方法: 方法一: $json= '[{"id":"1","name":"\u ...

vue将json格式的字符串格式化后输出到web界面上

vue将json格式的字符串格式化后输出到web界面上相关推荐

最新文章

热门文章