![cover](https://img-blog.csdnimg.cn/c3443b0ca67445a7af9bd0f770e03241.jpeg)
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>
更多推荐
所有评论(0)