vue数据绑定的嵌套怎么写？
vue的论坛人气不行，只能跑这里来问了 我想自己封装一个grid组件 ’grid’:{ ‘head’:[ { ‘text’:‘姓名’, ‘show’:true, ‘width’:‘100px’, ‘align’:‘center’, ‘keys’:‘name’, }, { ‘text’:‘年龄’, ‘show’:true, ‘width’:‘100px’, ‘align’:‘center’, ‘keys’:‘age’ }, ], ‘rows’:[ {‘name’:‘zhang’,‘age’:‘18’}, {‘name’:‘li’,‘age’:‘19’}, ], } head是grid的表头信息 rows是每一行的信息 通过head的keys值和rows里面的’name’,'age’绑定,大意就是需要这样的数据绑定{{rows[index].{{head[index].keys}}}},在vue中应该怎么写呢
4 回复
第一种方式：
<table>
<thead>
<tr>
<td v-for="item in grid.head">{{item.text}}</td>
</tr>
</thead>
<tbody>
<tr v-for="item in grid.rows">
<td>{{item[grid.head[0].keys]}}</td>
<td>{{item[grid.head[1].keys]}}</td>
</tr>
</tbody>
</table>
第二种方式：
<table>
<thead>
<tr>
<td v-for="item in grid.head">{{item.text}}</td>
</tr>
</thead>
<tbody>
<tr v-for="item in grid.rows">
<td v-for="el in grid.head">{{item[el.keys]}}</td>
</tr>
</tbody>
</table>
