溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近接到一個比較簡單的項目，不準備使用數據庫，打算用JSON數據就可以了。結合當前火熱的VUE.JS進行數據渲染。
盡管不打算使用數據庫，可是一般的操作增刪查改依舊是少不了的。如果使用到數據庫的話，不妨做一個API出來，那么網站、APP等都可以依照這個進行操作。在這篇文章里面，我們只是打算簡單的引用而已。
下面先來看看我的JSON文件，這里是一個類別文檔Category.json：
{
"msg": "ok",
"data":[
{
"ID":"1",
"name": "地產",
"Url":"/Category/List/1"
},
{ "ID":"2",
"name": "科技",
"Url":"/Category/List/2"},
{ "ID":"3",
"name": "醫藥",
"Url":"/Category/List/3"},
{ "ID":"4",
"name": "其他",
"Url":"/Category/List/4"}
]
}
下面我們通過Javascript進行渲染，將數據渲染到導航里面去。這里有兩種方式：如果你的項目已經帶有JQuery的話，可以參考一下使用下面的代碼：
$(function(){
$.ajax({
type:'get',
url:'Category.json',
success: function(data){
if(data.msg == "ok"){
pushDom(data.data);
}
else
{
alert("服務器返回異常");
} },
error: function(data){
alert(JSON.stringify(data));
}
});
function pushDom(data1){
var vm = new Vue({ el: '#app', data: { peps:data1 } });
}
})
然后到html中，把數據渲染出來
<div id="app" class="inner">
<ul v-for = "pep in peps ">
<li><a href="{{pep.Url}}" rel="external nofollow" > {{pep.name}}</a></li>
</ul>
</div>
上面的代碼是使用JQuery的$.ajax 將json的數據引入，但如果你的項目里面沒有使用到JQuery的話，就要使用到vue-resource.js了。
在html中引入：
<script src="/js/vue.js"></script> <script src="/js/vue-resource.js"></script>
我第一次使用vue-resource.js的時候，和vue.js版本不匹配居然屢屢出錯，這是新手必須要注意的。這是一個坑啊，如果你們運行下面的代碼不能渲染的話，99%是遇到這個坑了。
<script>
var app = new Vue({
el: '#app',
data: {
peps: ''
},
mounted: function() {
this.getJsonInfo()
},
methods: {
getJsonInfo: function() {
this.$http.get('Category.json').then(function(response){
console.log(response.data.data)
var resdata = response.data.data
this.peps = resdata
}).catch(function(response){
console.log(response)
console.log("居然沒有彈窗")
})
}
}
})</script>
html處不用做其它修改。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
