页面中快速使用JSON数据格式化模块插件

JSON数据格式化模块插件,可以用来展示JSON数据,也可以验证某数据是否为JSON格式

1、可以使用 b-code-editor插件 来实现效果,方便快捷,
安装命令:npm install bin-code-editor -d

2、在项目的main.js文件中导入并全局安装

import CodeEditor from 'bin-code-editor';

Vue.use(CodeEditor);

3、具体页面中使用即可

<b-code-editor 
  v-model="jsonStr" 
  :auto-format="true" 
  :smart-indent="true" 
  theme="dracula" 
  :indent-unit="4" 
  :line-wrap="false" 
  ref="editor">
</b-code-editor>

4、设置测试数据

jsonData:`{
"employees": [
{
      "firstName": "Bill",
      "lastName": "Gates"
}, 
{
      "firstName": "George",
      "lastName": "Bush"
}, 
{
      "firstName": "Thomas",
      "lastName": "Carter"
    }]
  }`

5、最终实现效果如下
在这里插入图片描述

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐