编码题目4:基于Vue完成数据的加载展示，如下图所示,数据自行添加. 要求是页面挂载之后进行表格的数据展示._基于vue完成数据的加载展示,如下图所示,数据自行添加. 要求是页面挂载之后进行表-CSDN博客

本文链接：https://blog.csdn.net/whyszan/article/details/130272005

请添加图片描述

<!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>Document</title>
    <script src="./JS/vue.js"></script>
</head>
<body>
    <div id="t1">
        <table align="center" border="1" cellspacing="0" width="60%">
            <tr align="center" style="background-color: aquamarine;height: 50px;">
                <td><input type="checkbox"></td>
                <td>姓名</td>
                <td>图像</td>
                <td>性别</td>
                <td>职位</td>
                <td>入职日期</td>
                <td>最后的操作时间</td>
                <td>操作</td>
            </tr>
            <tr align="center" v-for="(user, index) in users">
                <td><input type="checkbox"></td>
                <td>{{user.name}}</td>
                <td><img width="70px" height="50px" :src="user.image"></td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-else>女</span>
                </td>
                <td>{{user.job}}</td>
                <td>{{user.jointime}}</td>
                <td>{{user.updatetime}}</td>
                <td><a href="">编辑</a>&nbsp;&nbsp;<a href="">删除</a></td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#t1",
        data:{
            users:[{
                name: "赵敏",
                image: "",
                gender: 2,
                job: "班主任",
                jointime: "2008-12-18",
                updatetime: "2022-07-22 12:05:20"
            },
            {
                name: "风清扬",
                image: "",
                gender: 1,
                job: "讲师",
                jointime: "2015-07-22",
                updatetime: "2022-07-21 15:05:20"
            },
            {
                name: "风清扬",
                image: "",
                gender: 1,
                job: "讲师",
                jointime: "2015-07-22",
                updatetime: "2022-07-21 15:05:20"
            },
            {
                name: "风清扬",
                image: "",
                gender: 1,
                job: "讲师",
                jointime: "2015-07-22",
                updatetime: "2022-07-21 15:05:20"
            },
            {
                name: "风清扬",
                image: "",
                gender: 1,
                job: "讲师",
                jointime: "2015-07-22",
                updatetime: "2022-07-21 15:05:20"
            },
            {
                name: "风清扬",
                image: "",
                gender: 1,
                job: "讲师",
                jointime: "2015-07-22",
                updatetime: "2022-07-21 15:05:20"
            },
            {
                name: "风清扬",
                image: "",
                gender: 1,
                job: "讲师",
                jointime: "2015-07-22",
                updatetime: "2022-07-21 15:05:20"
            },]
        }
    })
</script>
</html>