vue 前台对象转json_vue.js实现数据库的JSON数据输出渲染到html页面功能示例

本文实例讲述了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程序设计有所帮助。