我們大多時(shí)候渲染表格都是key值在頁面上寫死的情況下，一個(gè)個(gè)value渲染，那我們遇到數(shù)據(jù)是鍵值對的時(shí)候該如何渲染呢？

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),環(huán)縣企業(yè)網(wǎng)站建設(shè),環(huán)縣品牌網(wǎng)站建設(shè),網(wǎng)站定制,環(huán)縣網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,環(huán)縣網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

我們查看vue的官方文檔，如下：

值域 v-for

v-for 也可以接收一個(gè)整數(shù)，此時(shí)它將重復(fù)模板數(shù)次。

 {{ n }} 

結(jié)果：

那我們就可以通過如下方法來渲染列表：

  

  

   
{{items[2*n].user}}
   
{{items[2*n].msg}}
   
{{items[2*n+1].user}}
   
{{items[2*n+1].msg}}
  
  
 

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)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。