vue数据绑定的嵌套怎么写？

问答

FFlyerJay发布于10 年前最后回复10 年前|4 回复9193 浏览0 收藏

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中应该怎么写呢

查看回复

JsonSong89#1·10 年前

for循环的时候能拿到index 把head要显示的keys放在一个array里面循环rows的时候就能通过index拿到key了

satrong#2·10 年前

第一种方式：

<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>

FlyerJay#3·10 年前

引用 JsonSong89for循环的时候能拿到index 把head要显示的keys放在一个array里面循环rows的时候就能通过index拿到key了

@178220709 嗯

FlyerJay#4·10 年前

引用 satrong第一种方式：第二种方式：

@satrong 都可以用谢谢

参与回复

登录后即可参与回复。登录

vue数据绑定的嵌套怎么写？

回复 (4)