宝哥软件园

Vue.js渲染表格的方法

编辑:宝哥软件园 来源:互联网 时间:2021-08-30

大多数情况下,当我们在页面上呈现写死键值的表时,我们会一个接一个地呈现它们,那么当数据是键值对时,我们如何呈现它们呢?

我们检查vue的官方文件如下:

范围v-for

V-for还可以接收一个整数,在这种情况下,它将重复模板几次。

div span v-for=' n in 10 ' { n } }/span/div结果:

然后,我们可以通过以下方式呈现列表:

table class=' table table-bordered ' t body tr v-for=' n in items.length/2' TD { { items[2 * n]。用户}}/td td{{items[2*n]。msg } }/TD TD { { items[2 * n ^ 1]。用户} }/TD TD { { items[2 * n ^ 1]。msg } }/TD/tr/t body/table export default { data(){ return { items :[{ user : ' A ',msg:'1'},{user:'B ',msg:'2'},{user:' c ',msg:' 3'},{user:' d ',msg:' 4'},{ user: ' e ',msg:

您可以通过更改数组长度除以的值来调整列数!

以上Vue.js的表格渲染方法是边肖分享的全部内容。希望能给大家一个参考,支持我们。

更多资讯
游戏推荐
更多+