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%;
}