SOURCE

Vue.component('grid',{
    props:['data'],
    methods:{
        clk(){
            alert(1);
        }
    },
    template:'#grid'
});

let app = new Vue({
    el:'#app',
    data:function(){
        return {
            msg:'this is a test msg',
            name:'appname',
            userslist:[
                {name:'zhangsan1',age:18,birthday:'1988-11-12'},
                {name:'zhangsan2',age:18,birthday:'1988-11-12'},
                {name:'zhangsan1',age:18,birthday:'1988-11-12'},
                {name:'zhangsan2',age:18,birthday:'1988-11-12'},
                {name:'zhangsan1',age:18,birthday:'1988-11-12'},
                {name:'zhangsan2',age:18,birthday:'1988-11-12'},
                {name:'zhangsan1',age:18,birthday:'1988-11-12'},
                {name:'zhangsan2',age:18,birthday:'1988-11-12'},
                {name:'zhangsan1',age:18,birthday:'1988-11-12'},
                {name:'zhangsan2',age:18,birthday:'1988-11-12'},
                {name:'zhangsan1',age:18,birthday:'1988-11-12'},
                {name:'zhangsan2',age:18,birthday:'1988-11-12'}
                
            ]
        }
    },
    methods:{
        test(){

        },
    }
});

let x =  {name:'zhangsan1',age:18,birthday:'1988-11-12'};
for(let key in x){
    console.log(key,x[key]);
}

<div id="app">
    <grid :data='userslist'></grid>
</div>

<template id="grid">
    <table>
        <tr v-for="row in data">
            <td><input type="checkbox"></td>
            <td v-for="(value,key) in row">{{value}}</td>
        </tr>
    </table>
</template>