欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項(xiàng)目如何引入json數(shù)據(jù)

 更新時(shí)間：2022年10月19日 08:58:08   作者：followly  
這篇文章主要介紹了vue項(xiàng)目如何引入json數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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)文章

最新評(píng)論