vue.js实现数据库的JSON数据输出渲染到html页面功能示例

前端  /  管理员 发布于 4年前   2422

本文实例讲述了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来解析

            
    
      
        
ID
        
资源名称
        
LOGO
        
更新时间
        
下载地址
        
阅读量
      
      
        
{{r.id}}
        
{{r.resname}}
        
        
{{r.resint}}
        
点击下载
        
{{r.pageview}}
      
    
  

最终运行index.html

希望本文所述对大家vue.js程序设计有所帮助。

您可能感兴趣的文章:

• Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
• VUE渲染后端返回含有script标签的html字符串示例
• 详解三种方式解决vue中v-html元素中标签样式
• VUE页面中加载外部HTML的示例代码
• 在vue中把含有html标签转为html渲染页面的实例