【转】[Vue] 加载数据并显示为表格

<template>
    <div>
        <h1> User Data</h1>
        <div class="thead">
            <div class="row bold">
                <div class="col">编号</div>
                <div class="col">姓名</div>
                <div class="col">性别</div>
                <div class="col">年龄</div>
            </div>
        </div>
        <div class="tbody">
            <div v-if="users.length > 0">
                <div class="row" v-for="s of students" :key="s.id">
                    <div class="col">{{ s.id }}</div>
                    <div class="col">{{ s.name }}</div>
                    <div class="col">{{ s.sex }}</div>
                    <div class="col">{{ s.age }}</div>
                </div>
            </div>
            <div class="row" v-else>暂无数据</div>
        </div> 
    </div>
</template>

<script>
import axios from 'axios';

const options = {
    mounted:function(){
        this.sendReq();
    },
    data: function () {
        return {
            users: []
        };
    },
    methods: {
        // 用 get 方法获取数据，不带请求体，不带 headers 头信息
        async sendReq() {
            const resp = await axios.get('/api/users');
            console.log(resp);
            this.users = resp.data;
        }
    }
};

export default options;
</script>