Vue中怎么利用v-for指令實(shí)現(xiàn)數(shù)據(jù)分組

 
 
 
 


 
 
  
   
    
     
      Data-{{cell}}
     
    
   
  
 

在computed中以3個(gè)元素為一組來動態(tài)分組，在綁定數(shù)據(jù)的地方使用嵌套的v-for循環(huán)，結(jié)果如下圖(3列4行)

這里還對包裹數(shù)據(jù)的每個(gè)div的id作了特別的處理，動態(tài)產(chǎn)生id，每個(gè)id都有一個(gè)字符串前綴T，后面是數(shù)據(jù)的索引，索引采用i*3+j計(jì)算獲得，以便于對應(yīng)到原始的數(shù)據(jù)list。

上述內(nèi)容就是Vue中怎么利用v-for指令實(shí)現(xiàn)數(shù)據(jù)分組，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。