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

首先上图解释：
黑框元素宽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;   } }}...