Vue.js渲染表格的方法

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

我们检查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的表格渲染方法是边肖分享的全部内容。希望能给大家一个参考，支持我们。