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

(编辑：jimmy 日期: 2024/11/15 浏览：3 次 )

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>VUE解析JSON数据</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="/UploadFiles/2021-04-02/vue.min.js">

最终运行index.html

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

上一篇：vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
下一篇：jQuery实现的记住帐号密码功能完整示例