Vue之使用ajax获取json数据，并用v-for循环显示在表格中

原创于 2021-10-08 19:51:19 发布 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #json #html #vue

vue 专栏收录该内容

27 篇文章

订阅专栏

这篇文章展示了如何使用Vue.js和AJAX从服务器获取JSON数据，并动态填充到HTML表格中。通过v-for指令实现数据绑定，适合前端开发者学习数据绑定和表格操作。

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

<!--作者： V： jbossjf-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        table {
            margin: 100px auto;
            border: 1px solid #000;
            border-collapse: collapse; /*设置表格的边框是否被合并为一个单一的边框*/
            border-spacing: 0; /*设置相邻单元格的边框间的距离*/
        }
        tr {
            width: 300px;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #000;
            background-color: pink;
        }
        td, th {
            width: 99px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-right: 1px solid #000;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>住址</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="site in sites">
            <td v-text="site.name"></td>
            <td v-text="site.age"></td>
            <td v-text="site.address"></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            sites: []
        },
        created: function () {
　　　　　　//为了在内部函数能使用外部函数的this对象，要给它赋值了一个名叫self的变量。
            var self = this;
            $.ajax({
                url: '/tablev-for.php',
                type: 'get',
                data: {},
                dataType: 'json'
            }).then(function (res) {
                console.log(res);
　　　　　　　　　　//把从json获取的数据赋值给数组
                self.sites = res;
            }).fail(function () {
                console.log('失败');
            })
        }
    })

</script>