vue實(shí)現(xiàn)引入本地json的方法分析
更新時(shí)間：2018年07月12日 12:02:37 作者：佑之以航
這篇文章主要介紹了vue實(shí)現(xiàn)引入本地json的方法,結(jié)合實(shí)例形式分析了vue.js加載本地json文件及解析json數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了vue實(shí)現(xiàn)引入本地json的方法。分享給大家供大家參考，具體如下：
當(dāng)前需要使用的組件：
import data from './test.json'
export default{
data(){
return{
userinform: ''
}
},
mounted(){
this.userinform = data
}
}
test.json就是普通json格式就可以了！然后完美解決！
后臺(tái)服務(wù)器請(qǐng)求json方式：
this.$http.get('url').then(response => {
//succces callback
var data = response.body;
}, response => {
// error callback
alert('連接失?。?)
});
附：VUE解析json展示列表頁示例
<div class="padding">
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script>
function getJson(url,func){ $.ajax({ type:'get', url:url, dataType: 'json', success: function(data){ if (data.code==0){ var a = data.data.list;func(a); }else{ alert("接口調(diào)用失敗"); } }, error: function(data){ alert(JSON.stringify(data)); } }); }
$(function(){ var url = "http://www.test.com/index.php?s=/shop/list/"; getJson(url,pushDom); });
function pushDom(data){ var vm = new Vue({
el: '#app',
data: {
sites: data
}
})}
</script>
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了Vue組件之間傳值/調(diào)用的幾種方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
在vue和element-ui的table中實(shí)現(xiàn)分頁復(fù)選功能
這篇文章主要介紹了在vue和element-ui的table中實(shí)現(xiàn)分頁復(fù)選功能，本文代碼結(jié)合圖文的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
在vue項(xiàng)目中父子組件間的通訊很方便,但兄弟組件或多層嵌套組件間的通訊,就會(huì)比較麻煩,這時(shí)使用eventBus通訊,就可以很便捷的解決這個(gè)問題,這篇文章主要給大家介紹了關(guān)于Vue中事件總線(eventBus)使用的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了使用vue-upload上傳圖片的詳細(xì)使用說明，文中有相關(guān)的代碼示例供大家參考，感興趣的小伙伴一起跟著小編來學(xué)習(xí)吧2023-05-05
vue.js云存儲(chǔ)實(shí)現(xiàn)圖片上傳功能
示對(duì)象存儲(chǔ)是騰訊云提供的一種存儲(chǔ)海量文件的分布式存儲(chǔ)服務(wù)，本文主要介紹了用vue.js實(shí)現(xiàn)圖片上傳功能，感興趣的小伙伴們可以參考一下2021-05-05
vue怎樣獲取當(dāng)前時(shí)間,并且傳遞給后端(不用注解)
這篇文章主要介紹了vue怎樣獲得當(dāng)前時(shí)間,并且傳遞給后端(不用注解)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
vue3中如何通過ref和$parent結(jié)合defineExpose實(shí)現(xiàn)父子組件之間的通信
這篇文章主要介紹了vue3中通過ref和$parent結(jié)合defineExpose實(shí)現(xiàn)父子組件之間的通信,Vue3中通過ref和$parent的結(jié)合使用，及defineExpose的方法，可以非常便捷地實(shí)現(xiàn)父子組件之間的通信，需要的朋友可以參考下2023-07-07
淺析vue-cli3配置webpack-bundle-analyzer插件【推薦】
小編最近為了優(yōu)化vue項(xiàng)目性能，需要使用webpack-bundle-analyzer插件來分析報(bào)文件，在網(wǎng)上沒有找到合適的，下面小編給大家寫出來一個(gè)供大家參考2019-10-10
本篇文章主要介紹了詳解vue.js的devtools安裝 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
基于Vue實(shí)例對(duì)象的數(shù)據(jù)選項(xiàng)
下面小編就為大家?guī)硪黄赩ue實(shí)例對(duì)象的數(shù)據(jù)選項(xiàng)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08