Vue解析json数据的渲染

最新推荐文章于 2025-06-30 09:23:00 发布

编程微刊(祈澈菇凉)

最新推荐文章于 2025-06-30 09:23:00 发布

阅读量5.5k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_38822390/article/details/90046209

本文介绍了如何在Vue应用中解析并渲染本地json文件。通过参考文章，对比了使用ajax和axios请求本地json数据的方法，适合前端开发者学习理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title></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><!--vue.min.js的库-->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><!--jQuery库-->
   
</head>
<body>
    <div id="main">
       
            <div v-for="item in rows">              
                <p>姓名:{{item.name}}</p>               
                <p>昵称:{{item.nick}}</p>               
            </div>
       
    </div>
</body>
<script>
    $(document).ready(function () {
        $.getJSON("data.json", function (result, status) {
            var v = new Vue({
                el: '#main',
                data: {
                    rows: result
                }
            })
        });
    });
</script>
 
</html>

test.json

[
    {
        "name": "王小婷",
        "nick": "祈澈菇凉"
    }, {

        "name": "安安",
        "nick": "坏兔子"
    }, {

        "name": "编程微刊",
        "nick": "简书"
    }
]