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

长春小霸王

于 2021-10-08 19:51:19 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/jbossjf/article/details/120658586

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

<!--作者： 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>

长春小霸王

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Vue之使用ajax获取json数据，并用v-for循环显示在表格中

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <script src="jquery.min.js"></script&gt.
复制链接

扫一扫