一、导入Vue的js(这一步就不演示了)
二、创建Vue的对象、并且添加测试数据
注：el挂载的标签ID,components的myTable表示的是，在页面引入时的标签，tabletest为绑定的模板ID(后面会添加),props作为一个数组类型，里面的参数为页面引用时动态的参数（即为子组件传数据所用）。
1 <script type="text/javascript"> 2 var vue = new Vue({ 3 el: "#app", 4 data: { 5 persons: [{"name": "张三","age": 19}, 6 {"name": "张三","age": 20}, 7 {"name": "张三","age": 21}, 8 ], 9 person2:[{"name":"诸葛亮","age":1900,"birthday":"181年","sex":"男"}, 10 {"name":"貂蝉","age":1900,"birthday":"190年","sex":"女"}, 11 {"name":"刘备","age":1920,"birthday":"161年","sex":"男"}, 12 {"name":"周瑜","age":1930,"birthday":"161年","sex":"男"}, 13 ] 14 }, 15 components: { 16 myTable: { 17 template: "#tabletest", 18 props: ["persons"] 19 } 20 } 21 }) 22 </script>
三、创建一个Vue的模板
注：template标签下面有且只能有一个根标签。第5行的v-for用于动态输出列名、第7行循环每一个person对象、第9行输出对象所有的值
1 <template id="tabletest"> 2 <table> 3 <tr> 4 <td>num</td> 5 <td v-for="(value,key) in persons[0]">{{key}}</td> 6 </tr> 7 <tr v-for="(p,index) in persons"> 8 <td>{{index+1}}</td> 9 <td v-for="value in p">{{value}}</td> 10 </tr> 11 </table> 12 </template>
四、测试代码
1 <div id="app"> 2 <my-table :persons="persons"></my-table> 3 <my-table :persons="person2"></my-table> 4 </div>
注：表格的数据通过 :persons属性 动态选择（此属性在components已经定义好）
五、整体代码布局
六、测试结果
最后：有什么不对的地方，恳请各位斧正。谢谢！