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类型的数据。
<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
前端资料汇总
前端工程师岗位缺口一直很大,符合岗位要求的人越来越少,所以学习前端的小伙伴要注意了,一定要把技能学到扎实,做有含金量的项目,这样在找工作的时候无论遇到什么情况,问题都不会大。
更多推荐
所有评论(0)