vue中json格式化显示（vue-json-viewer）
warning:
这篇文章距离上次修改已过236天，其中的内容可能已经有所变动。
<template>
<div>
<vue-json-viewer
:value="jsonData"
:expand-depth="5"
copyable
sort
></vue-json-viewer>
</div>
</template>
<script>
import VueJsonViewer from 'vue-json-viewer'
export default {
components: {
VueJsonViewer
},
data() {
return {
jsonData: {
"name": "John",
"age": 30,
"city": "New York"
}
}
}
}
</script>这个例子中，我们首先导入了vue-json-viewer组件，然后在模板中使用它来展示jsonData对象。通过设置expand-depth属性为5，我们可以控制JSON树的默认展开深度。copyable属性允许用户复制JSON片段，sort属性会让JSON的键根据字母顺序排序。这个例子展示了如何在Vue应用中使用vue-json-viewer来格式化并展示JSON数据。
评论已关闭