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

2019-11-19 11:04:51

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script></head><body>  <div id="main">    <table border=1>      <tr>        <td>ID</td>        <td>资源名称</td>        <td>LOGO</td>        <td>更新时间</td>        <td>下载地址</td>        <td>阅读量</td>      </tr>      <tr v-for="r in rows">        <td>{{r.id}}</td>        <td>{{r.resname}}</td>        <td><img v-bind:src="r.resimg"/></td>        <td>{{r.resint}}</td>        <td><a v-bind:href="r.resurl" rel="external nofollow" >点击下载</a></td>        <td>{{r.pageview}}</td>      </tr>    </table>  </div></body><script>  $(document).ready(function () {    $.getJSON("data.json", function (result, status) {      var v = new Vue({        el: '#main',        data: {          rows: result        }      })    });  });</script></html>

最终运行index.html