简单的Mock.js配合简单的vue组件实现列表随机_vue获取列表的随机对象-CSDN博客

本文链接：https://blog.csdn.net/luckylbb/article/details/106685989

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
</head>
<body>
    <div id="app">
        <mytable :cols="list"></mytable>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>  
        let {list}=Mock.mock({
            "list|10":[{
                "id|+1":1001,
                nickname:"@cname",
                email:"@email",
                desc:"@cword(30)",
                birthday:"@date",
                city:"@city"
            }]
        })
        Vue.config.productionTip = false//不去提示
        Vue.component("mytable", {
            props:["cols"],
            template:`<table>
            <tr >
                <th>工号</th>
                <th>姓名</th>
                <th>描述</th>
                <th>生日</th>
            </tr>
            <tr v-for="(item,i) in cols">
                <td>{{item.id}}</td>
                <td>{{item.nickname}}</td>
                <td>{{item.desc}}</td>
                <td>{{item.birthday}}</td>
            </tr>
        </table>`
        })
        new Vue({
            el: "#app",
            data() {
                return {
                    cols:[
                       {key:'id',label:"编号"},
                       {key:'id',label:"编号"},
                       {key:'id',label:"编号"}
                   ],
                    list
                }
            },
        
            methods:{
            
            }
        })
    </script>
</body>
</html>