vue項(xiàng)目如何引入json數(shù)據(jù)
vue項(xiàng)目引入json數(shù)據(jù)
在項(xiàng)目中我們?cè)谝胱约簩?xiě)的json數(shù)據(jù)，可以通過(guò)json-server方法將json文件轉(zhuǎn)化為一個(gè)端口號(hào)引入！但是使用該方法前需要導(dǎo)入node的一個(gè)模塊！
json-server可以直接把一個(gè)json文件托管成一個(gè)具備全RESTful風(fēng)格的API,并支持跨域、jsonp、路由訂制、數(shù)據(jù)快照保存等功能的 web 服務(wù)器。
然后在json文件目錄下，運(yùn)行 json-server --watch --port 3001 data.json指令
通過(guò)啟動(dòng)json-server服務(wù)并偵聽(tīng)data.json，就可以將data.json文件托管成一個(gè) web 服務(wù)，此時(shí)data.json就充當(dāng)了數(shù)據(jù)庫(kù)服務(wù)器的作用
然后在組件中就可以直接使用這個(gè)端口啦！
vue引入json數(shù)據(jù),無(wú)請(qǐng)求,直接引入的那種
vue項(xiàng)目經(jīng)常會(huì)造一些假數(shù)據(jù),一般我都是直接在.vue頁(yè)面里直接寫(xiě),今天來(lái)看一下外部引入json數(shù)據(jù)吧
購(gòu)物車(chē)頁(yè)面(cart.vue)的假數(shù)據(jù)我放在了cartGoods.js里面
cartGoods.js代碼如下：
const goodsJson = [
{"id":1,"title":"蘋(píng)果","price":2.2},
{"id":2,"title":"香蕉","price":3.2},
{"id":3,"title":"橘子","price":1.4},
{"id":4,"title":"芒果","price":5.6},
{"id":5,"title":"梨子","price":3.3},
{"id":6,"title":"葡萄","price":3.6}
]
const addrList = [
{
id:1,
addr:"上海市浦東新區(qū)鵬飛路5103弄7號(hào)1102"
},
{
id:2,
addr:"上海市浦東新區(qū)高青路2345弄20號(hào)101"
}
]
export default {
goodsJson,
addrList
}
引入方式?jīng)]啥差別
// 引入
import goodsData from '../../static/mockJson/cartGoods';
// 應(yīng)用
created(){
console.log(goodsData) //打印出全部
this.goodsList = goodsData.goodsJson // 一個(gè)js里可以聲明多組數(shù)據(jù),該用誰(shuí)取誰(shuí)就好
},
渲染出來(lái)頁(yè)面效果如下:
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Ant Design的Table組件去除“取消排序”選項(xiàng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)展示tab欄切換
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)展示tab欄切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
前端vue+element使用SM4國(guó)密加密解密的詳細(xì)實(shí)例
國(guó)密即國(guó)家密碼局認(rèn)定的國(guó)產(chǎn)密碼算法,主要有SM1,SM2,SM3,SM4,下面這篇文章主要給大家介紹了關(guān)于前端vue+element使用SM4國(guó)密加密解密的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了jquery和vue對(duì)比，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue-router的兩種模式的區(qū)別，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
使用Vue實(shí)現(xiàn)簡(jiǎn)單日歷效果
這篇文章主要為大家詳細(xì)介紹了使用Vue實(shí)現(xiàn)簡(jiǎn)單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
vue中radio根據(jù)動(dòng)態(tài)值綁定checked無(wú)效的解決
這篇文章主要介紹了vue中radio根據(jù)動(dòng)態(tài)值綁定checked無(wú)效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了如何用vue設(shè)計(jì)一個(gè)日歷表，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了前端漸進(jìn)式框架VUE的相關(guān)資料，文中講解的非常細(xì)致，幫助大家開(kāi)始學(xué)習(xí)VUE，感興趣的朋友可以了解下2020-07-07