vue之点击“展开/收回”功能实现（两种情况）_vue实现点击展开详情

情况一：列表展开显示全部

说明：列表数据默认显示两条，点击展开全部按钮后显示全部列表数据

<template>
	<view class="page">
		<view class="list">
			<template v-for="(item, index) in isent ? listData : listData.slice(0, 2)">
				<view>{{ item.text }}</view>
			</template>
		</view>
		<view class="all" style="color: red;">
			<view @click="isent = !isent">{{ isent ? '收起' : '展开' }}</view>
		</view>
	</view>
</template>
 
<script>
import { ref } from 'vue';
export default {
	setup() {
		const isent = ref(false);
		const listData = ref([
              { text: '第一条数据' }, 
              { text: '第二条数据' }, 
              { text: '第三条数据' }, 
              { text: '第四条数据' }, 
              { text: '第五条数据' }]);
 
		return { isent, listData };
	}
};
</script>

情况二：部分数据展开收回

说明：一条数据，部分显示或隐藏

<template class="bigs" v-for="(item, index) in listData">
        {{ item.name || '--' }}
         //点击展开收回以下部分发生改变
        <template v-for="ite in item.goods_info" v-if="item.act">
                <view class="title">{{ ite.name || '--' }}</view>
        </template>
        <view class="all" :class="{ act: item.act }">
                <view  @click="item.act = !item.act">
                       {{ item.act? '收起' : '展开' }}
                </view>
        </view>
</template>