vue 数组数据为奇数,但是样式需要隔行换色(奇偶数据颜色保持一致)
·
没有做处理的效果:

数组:
attendeeSignFormVOList: [
{ name: "自定义名称1", data: "自定义数据1" },
{ name: "自定义名称2", data: "自定义数据2" },
{ name: "自定义名称3", data: "自定义数据3" },
],
html:
<!-- :class="
attendeeSignFormVOList.length % 2 != 0 &&
index == attendeeSignFormVOList.length - 1
? 'ticket-custom-item-content-max'
: ''
"添加此代码判断数组数量为奇数行且为最后一个子项时添加 ticket-custom-item-content-max类名将宽度设置为100%-->
<!-- 自定义项 -->
<div class="ticket-custom-item">
<div class="flex-row-wrap">
<div
class="ticket-custom-item-content flex-start"
v-for="(item, index) in attendeeSignFormVOList"
:key="index"
:class="attendeeSignFormVOList.length%2!=0&&index==attendeeSignFormVOList.length-1?'ticket-custom-item-content-max':''"
>
<div class="order-details-name">{{ item.name }}</div>
<div class="order-details-content">{{ item.data }}</div>
</div>
</div>
</div>
css:
.ticket-custom-item {
width: 100%;
background: #f7f9fc;
}
.ticket-custom-item {
border-top: 0.04rem solid rgba(242, 243, 247, 1);
margin-top: 0.2rem;
padding: 0.2rem 0 0 0;
}
.ticket-custom-item-content {
width: 50%;
padding: 0.13rem 0;
background: #ffffff;
margin-bottom: 0.14rem;
}
.ticket-custom-item-content-max {
width: 100% !important;
}
效果图:

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐

所有评论(0)