本文實(shí)例講述了vue.js實(shí)現(xiàn)數(shù)據(jù)庫(kù)的JSON數(shù)據(jù)輸出渲染到html頁(yè)面功能。分享給大家供大家參考，具體如下：

1、首先通過(guò)json.php把數(shù)據(jù)庫(kù)給輸出為json格式的數(shù)據(jù)

[

{

"id":1,

"resname":"百度",

"resimg":"http://www.baidu.com/1.jpg",

"resint":"2018-1-18",

"resurl":"http://www.baidu.com/1.apk",

"pageview":"100"

},

{

"id":2,

"resname":"阿里巴巴",

"resimg":"http://www.alibaba.com/1.jpg",

"resint":"2018-1-18",

"resurl":"http://www.alibaba.com/1.apk",

"pageview":"200"

},

{

"id":3,

"resname":"騰訊",

"resimg":"http://www.qq.com/1.jpg",

"resint":"2018-1-18",

"resurl":"http://www.qq.com/1.apk",

"pageview":"300"

}

]

然后通過(guò)vue.js來(lái)解析

VUE解析JSON數(shù)據(jù)

ID	資源名稱	LOGO	更新時(shí)間	下載地址	閱讀量
{{r.id}}	{{r.resname}}		{{r.resint}}	點(diǎn)擊下載	{{r.pageview}}

$(document).ready(function () {

$.getJSON("data.json", function (result, status) {

var v = new Vue({

el: '#main',

data: {

rows: result

}

})

});

});

最終運(yùn)行index.html

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

總結(jié)

以上是生活随笔為你收集整理的如何将mysql的数据库渲染到页面_vue.js实现数据库的JSON数据输出渲染到html页面功能示例...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。