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

页面中快速使用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、最终实现效果如下