本文實例講述了vue.js實現數據庫的JSON數據輸出渲染到html頁面功能。分享給大家供大家參考，具體如下：

1、首先通過json.php把數據庫給輸出為json格式的數據

[

{

"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"

}

]

然后通過vue.js來解析

VUE解析JSON數據

ID	資源名稱	LOGO	更新時間	下載地址	閱讀量
{{r.id}}	{{r.resname}}		{{r.resint}}	點擊下載	{{r.pageview}}

$(document).ready(function () {

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

var v = new Vue({

el: '#main',

data: {

rows: result

}

})

});

});

最終運行index.html

希望本文所述對大家vue.js程序設計有所幫助。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。