前言:需求是通过v-for渲染dataList列表时,点击某一item项单独控制该项的显示与隐藏。
功能点:要渲染的数组后拼一个布尔值字段,点击切换true/false,来控制每一项的显示与隐藏
1、html
<view class="equipment" v-for="(item,index) in dataList" :key="index">
<view class="spread_txt" @click="showTerData(index)" v-if="!item.dataShow">
展开终端数据
</view>
<view class="spread_txt" @click="showTerData(index)" v-if="item.dataShow">
收起
</view>
<view class="ter_data" v-show="item.dataShow">
这里是展开的数据
</view>
</view>
2、js
data() {
return {
// 定义空数组
dataList:[],
}
},
methods: {
getTetminalDataApi(){
// res.data.BODY.data是从后端获取的数组,大家用自己的数据即可
const List = res.data.BODY.data
// 该数组后拼dataShow字段,默认false不显示
this.dataList = List.map(item => { return { ...item, dataShow: false }; });
},
// 显示与隐藏终端数据
showTerData(i){
// 点击的时候拿到当前索引值,然后切换true/false
this.dataList[i].dataShow = !this.dataList[i].dataShow
},
}
3、css
.spread_txt{
width: 95%;
font-size: 24rpx;
font-weight: 600;
color: #088562;
margin: auto;
margin-top: 16rpx;
text-align: right;
box-sizing: border-box;
}
.ter_data{
width: 100%;
height: 500rpx;
padding-left: 24rpx;
box-sizing: border-box;
background-color: pink;
}
隐藏:
显示:
多多支持,一起努力~