我們大多時候渲染表格都是key值在頁面上寫死的情況下，一個個value渲染，那我們遇到數(shù)據(jù)是鍵值對的時候該如何渲染呢？
我們查看vue的官方文檔，如下：
值域 v-for
v-for 也可以接收一個整數(shù)，此時它將重復(fù)模板數(shù)次。
<div> <span v-for="n in 10">{{ n }} </span></div>結(jié)果：
那我們就可以通過如下方法來渲染列表：
<table class="table table-bordered"> <tbody> <tr v-for="n in items.length/2"> <td>{{items[2*n].user}}</td> <td>{{items[2*n].msg}}</td> <td>{{items[2*n+1].user}}</td> <td>{{items[2*n+1].msg}}</td> </tr> </tbody> </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:'5'}, {user:'F',msg:'6'}, ] } } }效果如下：
可以通過更改數(shù)組長度除以的數(shù)值來實(shí)現(xiàn)列數(shù)的調(diào)整！
以上這篇Vue.js實(shí)現(xiàn)表格渲染的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
