vue項目如何引入json數(shù)據
更新時間：2022年10月19日 08:58:08 作者：followly
這篇文章主要介紹了vue項目如何引入json數(shù)據，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue項目引入json數(shù)據
在項目中我們在引入自己寫的json數(shù)據，可以通過json-server方法將json文件轉化為一個端口號引入！但是使用該方法前需要導入node的一個模塊！
json-server可以直接把一個json文件托管成一個具備全RESTful風格的API,并支持跨域、jsonp、路由訂制、數(shù)據快照保存等功能的 web 服務器。
然后在json文件目錄下，運行 json-server --watch --port 3001 data.json指令
通過啟動json-server服務并偵聽data.json，就可以將data.json文件托管成一個 web 服務，此時data.json就充當了數(shù)據庫服務器的作用
然后在組件中就可以直接使用這個端口啦！
vue引入json數(shù)據,無請求,直接引入的那種
vue項目經常會造一些假數(shù)據,一般我都是直接在.vue頁面里直接寫,今天來看一下外部引入json數(shù)據吧
購物車頁面(cart.vue)的假數(shù)據我放在了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
}
引入方式沒啥差別
// 引入
import goodsData from '../../static/mockJson/cartGoods';
// 應用
created(){
console.log(goodsData) //打印出全部
this.goodsList = goodsData.goodsJson // 一個js里可以聲明多組數(shù)據,該用誰取誰就好
},
渲染出來頁面效果如下:
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Ant Design的Table組件去除“取消排序”選項操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)鼠標滑動展示tab欄切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
國密即國家密碼局認定的國產密碼算法,主要有SM1,SM2,SM3,SM4,下面這篇文章主要給大家介紹了關于前端vue+element使用SM4國密加密解密的相關資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了jquery和vue對比，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue-router的兩種模式的區(qū)別，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細介紹了使用Vue實現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
vue中radio根據動態(tài)值綁定checked無效的解決
這篇文章主要介紹了vue中radio根據動態(tài)值綁定checked無效的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了如何用vue設計一個日歷表，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了前端漸進式框架VUE的相關資料，文中講解的非常細致，幫助大家開始學習VUE，感興趣的朋友可以了解下2020-07-07