前后端数据交互，解决数据加载问题

最新推荐文章于 2024-09-05 11:41:54 发布

小白养成记￥

最新推荐文章于 2024-09-05 11:41:54 发布

阅读量101

点赞数

分类专栏：前端文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_44749255/article/details/130544784

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是一个使用Vue.js框架和Axios库进行Ajax数据加载的HTML页面案例。页面在数据加载完毕前显示正在加载数据，然后展示从http://yapi.smart-xwork.cn/mock/169327/emp/list获取的员工信息列表，包括姓名、图像、性别、职位、入职时间和最后创建时间。

摘要由CSDN通过智能技术生成

<!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">
    <title>Ajax案列</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        //解决数据加载不一致问题
        <div v-if="!loaded">正在加载数据</div>
        <table border="1" cellspacing="0" width="60%" v-show="loaded">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>图像</td>
                <td>性别</td>
                <td>职位</td>
                <td>入职时间</td>
                <td>最后创建时间</td>
            </tr>
            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index+1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender==1">男</span>
                    <span v-if="emp.gender==2">女</span>
                </td>
                <td>
                    {{emp.job}}
                </td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
    
</body>
<script>
     new Vue({
        el:"#app",
        data:{
            emps:[{name:'', job:'', gender:'', image:'', entrydate:'', updatetime:''}],
            loaded:false
        },
        mounted() {
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{
                console.log(result.data);
                this.emps=result.data.data;
                this.loaded=true;
            })
        },
    });
</script>
</html>