vue中v-for渲染怎么根據(jù)數(shù)據(jù)的不同顯示不同的模板

1.vue里面有:class可以動態(tài)綁定類,直接寫在v-for里面,將v-for循環(huán)的值作為:class的判斷添加;
2.下面貼上代碼html和js

<div v-for="(arrNumberList,index) in arrNumber" 
      :key='index'
      :class="['common-number',{'arr-length-number':arrNumberList.numberOne.length==3}]">
      {{arrNumberList.numberOne}}
 </div>

data() {
    return {
      arrNumber:[
        {numberOne:[1]},
        {numberOne:[1,2,3]},
        {numberOne:[1,2,3,4]},
      ]
    };
  },
  

3.希望能幫到你,圣誕節(jié)快樂噠

可以先預(yù)處理下數(shù)據(jù)

//長度轉(zhuǎn)css
function picToClassname(src) {
  let h = src.length
  if (h > 1) {
     return 'xxx'
  } else {
     return ''
  }
}

//數(shù)據(jù)預(yù)處理
arr.map((item) => {
  item.pic_classname= picToClassname(item.pics.length)
})