vue中v-for循环列表根据条件判断两边对齐效果(常用)
首先上图解释:黑框元素宽width:22%;循环给每个黑框添加class(也就是添加margin-left:4%;margin-top:20px);因为最左边一竖排我们不需要添加class,则我们需要条件判断是否需要添加classhtml代码:...//绑定class根据判断条件添加class,//imgListItem_mg(index)传入下标号参数,返回true or fals
·
首先上图解释:
黑框元素宽width:22%;
循环给每个黑框添加class(也就是添加margin-left:4%;margin-top:20px);
因为最左边一竖排我们不需要添加class,则我们需要条件判断是否需要添加class
html代码:
...
//绑定class根据判断条件添加class,
//imgListItem_mg(index)传入下标号参数,返回true or false
<div class="imgList_item " v-for="(o, index) in 7" :class="{margin: imgListItem_mg(index)}" :key="o">
//中间代码省略
...
</div>
....
style
...
.imgList>.imgList_item{width: 22%;display: inline-block;}
.imgList>.margin{margin-left: 4%;margin-top: 20px;}//添加class的样式
...
js代码
...
methods: {
imgListItem_mg:function(index){
var pre=index+1;//下标号+1则是当前第几个元素
console.log(pre);
var lineNumber=Math.ceil(pre/4);//行数,我的是4个为一行,不满4个也为1行,所以上取整
var preMar=(lineNumber*4)-3;//算出不需要添加class的元素
if(pre!=preMar){
return true;
}else if(pre=preMar){
return false;
}
}
}
...
更多推荐
已为社区贡献9条内容
所有评论(0)