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

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

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

vue項目引入json數(shù)據(jù)

在項目中我們在引入自己寫的json數(shù)據(jù)，可以通過json-server方法將json文件轉(zhuǎn)化為一個端口號引入！但是使用該方法前需要導(dǎo)入node的一個模塊！

json-server可以直接把一個json文件托管成一個具備全RESTful風(fēng)格的API,并支持跨域、jsonp、路由訂制、數(shù)據(jù)快照保存等功能的 web 服務(wù)器。

然后在json文件目錄下，運(yùn)行 json-server --watch --port 3001 data.json指令

通過啟動json-server服務(wù)并偵聽data.json，就可以將data.json文件托管成一個 web 服務(wù)，此時data.json就充當(dāng)了數(shù)據(jù)庫服務(wù)器的作用

 然后在組件中就可以直接使用這個端口啦！

vue引入json數(shù)據(jù),無請求,直接引入的那種

vue項目經(jīng)常會造一些假數(shù)據(jù),一般我都是直接在.vue頁面里直接寫,今天來看一下外部引入json數(shù)據(jù)吧

購物車頁面(cart.vue)的假數(shù)據(jù)我放在了cartGoods.js里面

cartGoods.js代碼如下：

const goodsJson = [
  {"id":1,"title":"蘋果","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號1102"
  },
  {
    id:2,
    addr:"上海市浦東新區(qū)高青路2345弄20號101"
  }
]

export default  {
  goodsJson,
  addrList
}

引入方式?jīng)]啥差別

// 引入
import goodsData from '../../static/mockJson/cartGoods';

// 應(yīng)用
created(){
  console.log(goodsData)   //打印出全部
  this.goodsList = goodsData.goodsJson    // 一個js里可以聲明多組數(shù)據(jù),該用誰取誰就好 
},

渲染出來頁面效果如下:

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論