uniapp选择框遍历数组
代码如下
<!-- 遍历数组 -->
<view class="itemList">
<view class="item acea-row row-between-wrapper" v-for="(item, indexw) in hnUserlist"
:key="indexw">
<view class="namele">{{ item.name }}</view>
<view class="listn acea-row row-middle">
<view class="itemn" :class=" item.indexOld == indexn ?'on' : '' "
v-for="(itemn, indexn) in item.detailValue" @click="tapAttr(indexw, indexn)" :key="indexn" >
{{ itemn.name}}
</view>
</view>
</view>
</view>
//测试
hnUserlist:[
{
detailValue: [{
name: '男',
value: 0
}, {
name: '女',
value: 1
}],
indexOld: 0,
name: "性别",
},
{
detailValue: [{
name: '社区居民',
value: 0
}, {
name: '非社区',
value: 1
}],
indexOld: 1,
name: "常驻类型",
}
.itemList {
/* max-height: 3.95*100rpx; */
height:100%;
overflow: auto;
margin-top: 0.36*100rpx;
}
.itemList .item~.item {
margin-top: 0.36*100rpx;
}
.itemList .item .title {
font-size: 0.3*100rpx;
color: #999;
padding: 0 0.3*100rpx;
}
.itemList .item .listn {
padding: 0 0.3*100rpx 0 0.16*100rpx;
}
.itemList .item .listn .itemn {
border: 1px solid #bbb;
font-size: 0.26*100rpx;
color: #282828;
padding: 0.07*100rpx 0.33*100rpx;
border-radius: 0.06*100rpx;
margin: 0.14*100rpx 0 0 0.14*100rpx;
}
.itemList .item .listn .itemn.on {
color: #fff;
background-color: #eb3729;
border-color: #eb3729;
}