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