vue动态设置v-for循环中item的样式
要实现的效果:点击时选中当前item,并将其他item恢复,默认选中第一个数据处理data() {return {dialog:true,choose_grade:1,gradeList: [{ label: "一年级", g_id: 1 ,choose:true},...
·
要实现的效果:
点击时选中当前item,并将其他item恢复,默认选中第一个
数据处理
data() {
return {
dialog:true,
choose_grade:1,
gradeList: [
{ label: "一年级", g_id: 1 ,choose:true },
{ label: "二年级", g_id: 2 ,choose:false },
{ label: "三年级", g_id: 3 ,choose:false },
{ label: "四年级", g_id: 4 ,choose:false },
{ label: "五年级", g_id: 5 ,choose:false },
{ label: "六年级", g_id: 6 ,choose:false },
],
}
},
v-for循环视图列表和样式
<div class="list">
<div v-for="(item,index) in gradeList" :key="index">
<div class="grade_item" :class="item.choose ? 'grade_item_yellow':''" @click="select_grade(item.g_id)" ref="grade_item">
<p class="text_grade">{{item.label}}</p>
</div>
</div>
</div>
样式
.list{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
// 自动换行
flex-wrap: wrap;
align-items: center;
margin-top: 0.48rem;
justify-content: center;
}
.grade_item{
width: 2.933333rem;
height: 1.066667rem;
background:rgba(244,244,244,1);
// background:rgba(255,220,32,1);
border-radius: 0.533333rem;
display: flex;
margin-right: 0.4rem;
margin-left: 0.4rem;
flex-direction: column;
align-items: center;
justify-content: center;
}
.grade_item_yellow{
background:rgba(255,220,32,1);
}
.text_grade{
width:1.28rem;
height:0.613333rem;
font-size:0.426667rem;
font-family:PingFangSC-Medium,PingFangSC;
font-weight:bold;
// color:rgba(102,102,102,1);
color:#666666;
// line-height:0.613333rem;
}
PS图层蒙版,全屏遮罩层样式
.popContainer{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:22222225;
width: 100%;
height: 100vh;
background: rgba(216,216,216,1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
更多推荐
已为社区贡献14条内容
所有评论(0)