Click on different items to control their display and hiding individually.

Preface: The requirement is that when rendering the dataList through v-for, click on an item to individually control the display and hiding of the item.
Function point : After the array to be rendered, put a Boolean value field, click to switch true/false, to control the display and hiding of each item
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;
}

Hide:

Show:

Thank you for your support and let’s work together~