1、例如下面的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"
    }
]

2、建立模板文件index.html,通过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">点击下载</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>

3、访问index.html查看效果。

标签: html, JSON, 输出JSON

添加新评论