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