vue使用json最簡單的兩種方式分享
更新時間：2022年03月31日 15:31:19 作者：得淼
這篇文章主要介紹了vue使用json最簡單的兩種方式分享，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用json最簡單方式
第一種
首先我項目是在 webpack 下搭建的vue項目
在public文件夾下創(chuàng)建jsonTest.json
json 格式的數(shù)據(jù)如下：
{
?? ?“innerList”: [
?? ??? ?{"attr1":"內(nèi)部數(shù)據(jù)1","attr2":"內(nèi)部數(shù)據(jù)2",...},
?? ??? ?{"attr1":"內(nèi)部數(shù)據(jù)1","attr2":"內(nèi)部數(shù)據(jù)2",...},
?? ??? ?....
?? ?]
}在某一組件內(nèi)：
......html元素
import people from '../../json/jsonTest.json';
?
export default{
?? ?data(){
?? ??? ?return {
?? ??? ??? ?dataset: people.innerList
?? ??? ?}
?? ?}
}第二種
getDataList(){
?this.$axios.get("/json/jsonTest.json").then((res)=>{
?//得到response.data數(shù)據(jù)做具體賦值操作
?}).catch(() => {
?? ??? ?response.errer
? ? ? ? ? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? ? ? ? ? ? message: response.errer.msg
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? })vue使用json假數(shù)據(jù)
第一種json數(shù)據(jù)寫在js文件中直接引入使用
直接將json數(shù)據(jù)引入頁面中
然后作為 data 數(shù)據(jù)返回出去、
//citidata.js 中導出數(shù)據(jù)
export default [
{
children: [
{
value: '東城區(qū)',
label: '東城區(qū)'
},
{
value: '西城區(qū)',
label: '西城區(qū)'
}
]
}
]
第二種使用json-server ./xxx.json 使用 生成請求接口
@
隨便寫入一些假數(shù)據(jù)這后 在終端中需要輸入命令json-server 路徑.\data.json
比如d
會生成 數(shù)據(jù)的請求連接
promise的all用法 所有請求完成后執(zhí)行
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?使用v-model實現(xiàn)父子組件通信的方法(常用在組件封裝規(guī)范中)
這篇文章主要介紹了Vue3?使用v-model實現(xiàn)父子組件通信(常用在組件封裝規(guī)范中)的方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
Vue數(shù)據(jù)雙向綁定的實現(xiàn)方式講解
Vue數(shù)據(jù)雙向綁定原理：Vue內(nèi)部通過Object.defineProperty方法屬性攔截的方式，把data對象里每個數(shù)據(jù)的讀寫轉(zhuǎn)化成getter/setter，當數(shù)據(jù)變化時通知視圖更新2022-08-08
這篇文章主要介紹了vue 手機物理監(jiān)聽鍵+退出提示代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue3中的hook簡單封裝，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+electron實現(xiàn)創(chuàng)建多窗口及窗口間的通信(實施方案)
這篇文章主要介紹了vue+electron實現(xiàn)創(chuàng)建多窗口及窗口間的通信,本文給大家分享實施方案結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
解決elementui中NavMenu導航菜單高亮問題(解決多種情況)
這篇文章主要介紹了解決elementui中NavMenu?導航菜單高亮問題(解決多種情況)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue 在服務(wù)器端直接修改請求的接口地址的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
Vue中computed屬性和watch,methods的區(qū)別
本文主要介紹了Vue中computed屬性和watch,methods的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要介紹了Vue 自定義指令功能,結(jié)合完整實例形式分析了vue.js自定義指令相關(guān)實現(xiàn)與使用操作技巧,需要的朋友可以參考下2019-09-09
在我們安裝完Node.js之后,需要使用npm命令來安裝一些工具,下面這篇文章主要給大家介紹了關(guān)于npm?install時卡住不動的五種解決方法,需要的朋友可以參考下2023-06-06