vue中给v-for加条件判定（vue中v-for循环列表根据条件判断两边对齐效果（常用））

最新推荐文章于 2025-07-06 22:51:21 发布

nz618

最新推荐文章于 2025-07-06 22:51:21 发布

阅读量2.7w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/nz618/article/details/90209621

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue中使用v-for循环时，根据条件为列表项添加左右边距，以实现两端对齐的布局效果。通过绑定class并自定义方法imgListItem_mg(index)，根据下标判断是否需要添加margin样式，从而实现不同位置元素的布局调整。

首先上图解释：
黑框元素宽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>
....
1
2
3
4
5
6
7
8
style
...
.imgList>.imgList_item{width: 22%;display: inline-block;}
.imgList>.margin{margin-left: 4%;margin-top: 20px;}//添加class的样式
...
1
2
3
4
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;
}
}
}
...
---------------------
作者：微信15268531097
来源：优快云
原文：https://blog.youkuaiyun.com/qq_38903950/article/details/78354293
版权声明：本文为博主原创文章，转载请附上博文链接！