HTML基础-11 前后端交互，通过接口来拿服务器的内容 axios，vue

最新推荐文章于 2023-05-27 03:45:14 发布

V_zcm

最新推荐文章于 2023-05-27 03:45:14 发布

阅读量539

点赞数

分类专栏： HTML 文章标签： vue.js html 交互

本文链接：https://blog.csdn.net/m0_59214979/article/details/121021560

版权

HTML 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

本节：通过aixos，从服务器拿数据，使用vue遍历出来。

首先，在头部<head>,引入vue，axios

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>



<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1.div

2.script ，axios接收数据

最后，完整代码

<!DOCTYPE html>
<html lang="en">
<!-- 主题：前后端交互，通过链接来拿服务器的内容 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--引入了vue-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--引入了axios-->
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 下面var app = new Vue 要用到的名字 -->
        <div v-for="(i,index) in goods ">
            <!-- 在这里面遍历 -->
            <div>{{i.label}}</div>
            <!--通过这个指针来指这个数组里面的内容 -->
            <div v-for = "(z,index0) in i.children">
                <!-- 二层指针 -->
                <div>{{z.cname}}</div>
                <div>{{z.pcname}}</div>
                <div>{{z.label}}</div>
                <br>
            <div v-for = "(c,index1) in z.children">
                <!-- 三层指针 -->
                <img :src="'http://static.yhjtp.com/'+c.img" style="width: 100px;height: 100px;" />
                <div>{{c.cname}}</div>
                <div>{{c.pcname}}</div>
                <div>{{c.label}}</div>
                <div>{{c.shopId}}</div>
                <br>
            </div>
            </div>
            <div></div>
        </div>
       
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            // 最外面的id名字
            data: {
                // 定义的数组名
                goods: [],
            },
            beforeCreate: function () {
                console.log("------beforeCreate------")
            },

            created: function () {
                console.log("------created------")
                var that = this;
                // 将那个变量，放到这里，一定要写的
                axios.get('http://yhjtp.com/Category/loadCategoryInfos?lv=3')
                // 获取服务器的链接
                    .then(function (j) {
                        //那个获取输出 
                        console.log(j);
                        // 输出这个
                        that.goods = j.data
                    })

                    .catch(function (error) {
                        console.log(error);
                    });
            },
            beforeMount: function () {
                console.log("--------beforeMount--------");
            },
            mounted: function () {
                console.log("--------mounted--------");
            },

        })
    </script>
</body>

</html>

V_zcm

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML基础-11 前后端交互，通过接口来拿服务器的内容 axios，vue

本节：通过aixos，从服务器拿数据，使用vue遍历出来。首先，在头部<head>,引入vue，axios <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>...
复制链接

扫一扫

专栏目录