标签：data rem vue ges 红色 strong class round code
v-for输出表格结构
数据库结构如下：
原理： 两个数组 a, b, 数组a的值，是数组b的键（索引）， 变量拼接（红色区域）；
<table>
<tr>
<th v-for=‘item in columnList‘>{{item.column_name}}</th> //表头循环表的字段
</tr>
<tr v-for=‘item in inforList‘>
<td v-for=‘it in columnList‘>{{item[it.column_name]}}</td> //循环字段对应的值
</tr>
</table>
//数据结构模拟
new Vue({ el: ‘#app‘, data: { columnList: [‘userId‘, ‘userName‘, ‘userTel‘, ‘userEmail‘, ‘userMessage‘, ‘inTime‘], //字段 inforList: [{‘userId‘: ‘2‘, ‘userName‘: ‘大华‘, ‘userTel‘: ‘12345678‘, ‘userEmail‘: null, ‘userMessage‘: ‘哈哈’，‘inTime‘: ‘2017-10-17 17:07:03‘}，{...}] //值 }
})
效果图：
标签：data rem vue ges 红色 strong class round code
原文地址：http://www.cnblogs.com/wangyihong/p/7687803.html
