vue-json-viewer插件实现JSON数据在页面的展示【高亮、可折叠、可复制】

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

$ yarn add vue-json-viewer

代码实现

在script 里面导入包

import Vue from ‘vue’;

import JsonViewer from ‘vue-json-viewer’;

// Import JsonViewer as a Vue.js plugin

Vue.use(JsonViewer);

在vue项目中引入里面加入如下一种： 其中jsonData必须是json类型的数据。

{{ $t(‘parameters’) }}

<json-viewer

:value=“jsonViewer”

:expand-depth=“5”

:copyable=“copyable”

boxed

sort

@copied=“onCopy”

然后静态文件和引入都写好后，在script里面，定义jsonData，为它赋值

1、写死的实现：

export default {

data() {

return {

jsonData: {

name: ‘renlei’,

age: 18

},

copyable: {

copyText: this.$t(‘share’),

copiedText: this.$t(‘shared’),

timeout: 2000

},

};

},

2、动态赋值实现

如果动态赋值的话，后台数据返回的可能是一个字符json，需要string类型的json字符串，转换为json格式处理才能使用。然后将处理的数据复制给jsonData,否则会引起报错。

可选配置说明

<json-viewer

:value=“jsonData”

:expand-depth=5

copyable

boxed

sort>

| 参数 | 说明 | 默认值 |

| — | — | — |

| value | JSON 数据(支持与 v-model使用) | Required |

| expand-depth |

在此深度下，进一步下陷

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。