vue-json-viewer展示JSON內(nèi)容實踐
前言
最近寫的一個小案例，需要將接口返回的JSON內(nèi)容顯示在頁面上，要求是要和控制臺返回的JSON內(nèi)容一樣能點擊展開顯示或者關(guān)閉，當時只知道處理內(nèi)容格式，后來才發(fā)現(xiàn)可以通過json-viewer解決。
接口內(nèi)容預處理
我這邊是用axios去獲取接口內(nèi)容，最開始是獲取到一個對象，因為想著要獲取其內(nèi)容要以JSON格式展示，所以要將該對象進行JSON格式化。
JSON格式化的方式如下：
JSON.stringify(value, replacer, space) //value是指js對象 //replacer為替換對象，可以是一個方法、對象或數(shù)組，將value按照替換規(guī)則展示。 //space為填充參數(shù)，可以是數(shù)字或字符串，將value按照參數(shù)進行格式化展示。
但是通過JSON.stringify()處理后的內(nèi)容直接用json-viewer，發(fā)現(xiàn)是一堆類似JSON格式的文本，依舊實現(xiàn)不了控制臺那樣的點擊展開或關(guān)閉的情況，后面發(fā)現(xiàn)還要通過JSON.parse()進一步處理，將其處理成JavaScript對象。
所以接口內(nèi)容處理代碼如下：
axios.get(this.urlAdd).then(res => {
console.log(res);
this.dataResponse = JSON.stringify(res, null, ' ');
this.dataResponse = JSON.parse(this.dataResponse);
})
json-viewer使用
json-viewer屬于vue的插件，所以使用前需要安裝。
vue-json-viewer插件安裝
npm install vue-json-viewer --save
引入插件
我這邊是全局引入，另外還引入了對應的樣式，代碼如下：
//main.js import Vue from 'vue' import JsonViewer from 'vue-json-viewer' Vue.use(JsonViewer); //App.vue import 'vue-json-viewer/style.css';
使用插件
插件引入后，直接在Vue所控制的元素塊內(nèi)對應的位置使用即可。
具體使用方法可以參考官網(wǎng)地址：vue-json-viewer
我這邊的代碼如下：
<json-viewer :value="dataResponse" :expand-depth=2 copyable boxed sort v-if="dataResponse" @keyclick="handleClickJson"></json-viewer>
其中綁定的keyclick事件，是我之后用于點擊展示的對應的JSON內(nèi)容，獲取所點擊位置的值而綁定的事件。
expand-depth的值是指默認展示的層數(shù)。
總結(jié)
基本上通過上述步驟就能成功把JSON內(nèi)容按控制臺的格式展示在頁面上了。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue項目開發(fā)中,跨頁面通信是高頻需求,本文整理8種主流通信方式,每種方式附完整可運行Demo、適配場景和注意事項,覆蓋Vue2、Vue3所有項目場景,新手也能直接復制落地,快跟隨小編一起學習一下吧2026-04-04
分頁組件在web項目中是十分常見的組件，讓我們使用Vue構(gòu)建可重用的分頁組件，關(guān)于基本結(jié)構(gòu)和相關(guān)事件監(jiān)聽大家參考下本文2018-03-03
本文主要介紹了vue3組件庫添加腳本的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-06-06
本文給大家分享vue自定義組件的四種方式，通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2020-02-02
Composition API思想封裝NProgress示例詳解
這篇文章主要為大家介紹了Composition API思想封裝NProgress示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
今天小編就為大家分享一篇vue 純js監(jiān)聽滾動條到底部的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在日常工作和生活中,我們經(jīng)常需要記錄時間間隔,比如工作打卡、學習時長、項目耗時等,今天我將為大家介紹一個基于Vue3的打卡計時器實現(xiàn)方案,需要的朋友可以參考下2026-03-03
總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路，Axios是一個開源的可以用在瀏覽器端和Node JS的異步通信框架，主要作用就是實現(xiàn)AJAX異步通信2023-02-02
這篇文章主要介紹了vue+vant實現(xiàn)商品列表批量倒計時功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
Vue3應對后端接口返回十萬條數(shù)據(jù)的解決方案
在前端開發(fā)中,我們有時會遇到后端接口直接返回 十萬條數(shù)據(jù) 的情況,很多初學者會直接把數(shù)據(jù)全部 v-for 渲染到頁面上,結(jié)果瀏覽器瞬間卡死甚至崩潰,本文將從問題原因出發(fā),逐步給出幾種常見解決方案,需要的朋友可以參考下2025-09-09