vue中v-for渲染怎么根据数据的不同显示不同的模板

Question

v-for渲染中怎么根据数据的长度添加不同的class

判断图中pics的length添加不同的classname

Answer 1

可以先预处理下数据

//长度转css
function picToClassname(src) {
  let h = src.length
  if (h > 1) {
     return 'xxx'
  } else {
     return ''
  }
}

//数据预处理
arr.map((item) => {
  item.pic_classname= picToClassname(item.pics.length)
})

Answer 2

1.vue里面有:class可以动态绑定类,直接写在v-for里面,将v-for循环的值作为: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.希望能帮到你,圣诞节快乐哒