開(kāi)始的時(shí)候我以為，用vue去調(diào)取json要多么的麻煩，完咯就先去的百度，找了幾個(gè)，看上面又要配置這配置那的，看的我都頭大，像一些思維邏輯清晰的肯定不會(huì)出現(xiàn)這種情況。
下面我說(shuō)下我這的情況，大家依情況代入
當(dāng)然vue你剛開(kāi)始創(chuàng)建的話，你是要去配置下東西，下面我說(shuō)的是你的項(xiàng)目能夠跑起來(lái)的情況，完咯再去想辦法去引用json，當(dāng)然我這里用的也是axios的獲取方法，如果不是這種方法的可以帶過(guò)了
首先你要知道那你的json應(yīng)該放在哪個(gè)文件夾下（普通引用）如果你想寫的有自己的規(guī)范，可以按照你自己的方式來(lái)。在網(wǎng)上看見(jiàn)了幾個(gè)放在不同文件夾下的，好像要去配置什么東西，我也沒(méi)細(xì)看，但標(biāo)準(zhǔn)模式下最好放到你的static的文件夾下，來(lái)上圖
如果沒(méi)有放到這個(gè)文件夾下可能會(huì)報(bào)錯(cuò)喲！
json數(shù)據(jù)一定要寫的規(guī)范
{ "status":"0", "result":[ { "productId":"10001", "productName":"小米6", "prodcutPrice":"2499", "prodcutImg":"mi6.jpg" }, { "productId":"10002", "productName":"小米筆記本", "prodcutPrice":"3999", "prodcutImg":"note.jpg" }, { "productId":"10003", "productName":"小米6", "prodcutPrice":"2499", "prodcutImg":"mi6.jpg" }, { "productId":"10004", "productName":"小米6", "prodcutPrice":"2499", "prodcutImg":"1.jpg" }, { "productId":"10001", "productName":"小米6", "prodcutPrice":"2499", "prodcutImg":"mi6.jpg" }, { "productId":"10002", "productName":"小米筆記本", "prodcutPrice":"3999", "prodcutImg":"note.jpg" }, { "productId":"10003", "productName":"小米6", "prodcutPrice":"2499", "prodcutImg":"mi6.jpg" }, { "productId":"10004", "productName":"小米6", "prodcutPrice":"2499", "prodcutImg":"1.jpg" } ] }json寫好后就需要去引入了，想辦法調(diào)用到這些數(shù)據(jù)咯由于是本地連接的地址一定要http://localhost:8080/static/ceshi.json這樣的格式
<script> import axios from 'axios' export default{ data(){ return { res:"",//創(chuàng)建對(duì)象 } }, mounted () { this.getGoodsList() }, methods: { getGoodsList () { this.$axios.get('http://localhost:8080/static/ceshi.json').then((res) => { //用axios的方法引入地址 this.res=res //賦值 console.log(res) }) } } }</script><div class="hello"> <el-table :data="res.data.result" border style="width: 100%"> <el-table-column fixed prop="productId" label="日期" width="150"> </el-table-column> <el-table-column prop="productName" label="崗位" width="120"> </el-table-column> <el-table-column prop="prodcutPrice" label="手機(jī)號(hào)" width="120"> </el-table-column> <el-table-column prop="prodcutImg" label="姓名" width="120"> </el-table-column> </el-table> </div>
以上所述是小編給大家介紹的VUE調(diào)用本地json的使用方法詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
