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