[JavaScript知识库]vue利用计算属性做（展开收起）（整理）

<template>
	<div class="wrap">
		<div class="box">
			<div v-for="item in showItem">{{item}}</div>
			<div style="color: red;" @click="showAll = !showAll">{{btnText}}</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				foodList: [
					"测试1", "测试2", "测试3", "测试4", "测试5", "测试6", "测试7" //进行显示的数据
				],
				showAll: false //标记数据是否需要完全显示的属性
			}
		},
		computed: {
			showItem() {
				if (this.showAll == false) { //当数据不需要完全显示的时候
					var showItem = []; //定义一个空数组
					if (this.foodList.length > 4) { //这里我们先显示前四个--核心-开始显示几条
						for (var i = 0; i < 4; i++) {
							showItem.push(this.foodList[i])
						}
					} else {
						showItem = this.foodList
					}
					return showItem; //返回当前数组
				} else {
					return this.foodList;
				}
			},
			btnText() {
				if (this.showAll == false) { //对文字进行处理（枚举）
					return "展开全部"
				} else {
					return "收起"
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.box{
		display: flex;
		div{
			margin-left: 20px;
		}
	}
</style>