vue 根据不同条件切换多个class

vue 根据不同条件切换多个class

需求：根据后台返回的数组长度显示不同数量的视频，比如我这边需要显示数量分别为：1个、2个、4个、6个四种不同数量的视频格式

方法：利用vue的计算属性动态赋予不同类名

数组格式为

videolist:[
        {
          id:1,
          video: 'https://ymr-test.oss-cn-hangzhou.aliyuncs.com/testVideo/be5a7186-1f7b-45b2-b843-4b6eb6e9da7f.mp4'
        },
        {
          id:2,
          video: 'https://ymr-test.oss-cn-hangzhou.aliyuncs.com/testVideo/f6a2fd89-f27e-4c97-a1cd-929943de64cf.mp4'
        }
   ]

html模块

 <div class="video-list" 
 		:class="classObject" 
 		v-for="(item,index) in videolist" :key="index">
        <img class="viewLarge" 
        	:class="classImg" 
        	src="../assets/image/bg/video.png" alt=""
        	@click="viewDetail(item.video)">
        <vueMiniPlayer 
          :ref="item.name"
          :video="item.video"
        />
 div>

js模块

利用计算属性根据不同条件给予不同类名，我这里用了两个 classObject以及classImg

computed: {
    classObject:function () {
      return {
        oneList:this.videolist.length<2,//当视频列表小于2的时候显示1个
        twoList:this.videolist.length<3 && this.videolist.length>1,//当视频列表大于1小于3的时候显示2个
        fourList:this.videolist.length<5&&this.videolist.length>2 ,//当视频列表大于2小于5的时候显示四个
        sixList:this.videolist.length>4 ,//当视频列表大于2小于5的时候显示四个
      } 
    },
    classImg:function () {
      return {
        oneListImg:this.videolist.length<2,//当视频列表小于2的时候放大图位置
        twoListImg:this.videolist.length<3 && this.videolist.length>1,//当视频列表大于1小于3放大图位置
        moreListImg: this.videolist.length>2 ,//当视频列表大于2的时候放大图位置
      } 
    }
  },

css模块

.video-list{
      position: relative;
      .viewLarge{
        z-index: 10;
        width: 84px;
        height: 84px;
        position: absolute;
        cursor: pointer;
      }
      .oneListImg{
        top: 30%;
      }
      .twoListImg{
        top: 45%;
        left: 45%;
      }
      .moreListImg{
        top: 35%;
        left: 35%;
      }
    }
    .oneList{
      width: 93%;
      height: 142%;
      margin: -14px 26px 48px 22px;
    }
    .twoList{
      margin: 0px 20px 20px 0;
      width: 45%;
    }
    .fourList{
      margin: -17px 6px 20px 0;
      width: 33%;
    }
    .sixList{
      margin: 0 20px 20px 0;
      width: 30%;
    }