if - else 实现点击展开 / 折叠

? ????????? ?在前端开发过程中，我们经常需要使用到点击展开/折叠的按钮。

? ? ? ? 此案例是一个数组嵌套数组的效果展示，使用的是v-if? ? else 来实现的展开效果。

一、实现方法

??????????if...else：当指定条件为真，if 语句会执行一段语句。如果条件为假，则执行另一段语句。

二、实现步骤

要实现点击展开的效果，我们需要做以下几个步骤:

????????1.在HTML中定义一个按钮和需要展开或折露的内容

????????2.使用JQuery选择器选中按钮，并绑定点击事件处理函数

????????3.在点击事件处理函数中，切换内容的显示状态

①在view中添加如下代码

<template>
	<view style="">
		<view style="padding: 32rpx 0rpx 10rpx;border-top: 1px solid #E6E6E8; margin-top: 100rpx;">
			<!-- 绑定点击事件  @click="handleClick(index) -->
			<view v-for="(items, index) in positionData" style="padding: 32rpx; background-color: #fff;" :key="index"
				@click="handleClick(index)">
				<!-- 转动小图标 使用的时 if- else  -->
				<view class="flex">
					<view><text style="font-weight: bold;font-size: 30;">{{ items.mothes }}</text> 月</view>
					<u-icon v-if="!items.unfold" name="arrow-down-fill" size="10"></u-icon>
					<u-icon v-else name="arrow-up-fill" size="10"></u-icon>
				</view>
				<view v-if="items.unfold">
					<!-- 不能这样写 v-if 和 v-for同时写一个元素上 -->
					<view v-for="(item, index2) in items.data" class="flex-between"
						style="padding: 32rpx 0rpx;border-bottom: 1px solid #E6E6E8;" :key="index2">
						<view class="flex-colomn">
							<view style="color: #333333;font-size: 28rpx;font-weight: bold;">{{ item.status }}</view>
							<view style="color: #888889;font-size: 24rpx;">{{ item.time }}</view>
						</view>
						<view style="color: #222229;font-size: 32rpx; font-weight: bold;">{{ item.sasay }}</view>
					</view>
					<view>
					</view>
				</view>
			</view>
		</view>
		</view>
</template>

②在Js中添加

<script>
export default {
	data() {
		return {
			//数组嵌套数组
			positionData: [
				{
					id: '1',
					mothes: '11',
					allsasay: "10000",
					data: [{
						status: '微信充值',
						time: '2023-11-11 20：00',
						sasay: '+500',
					},
					{
						status: '微信充值',
						time: '2023-11-11 20：00',
						sasay: '+500',
					},{
						status: '微信充值',
						time: '2023-11-11 20：00',
						sasay: '+500',
					},{
						status: '微信提现',
						time: '2023-11-11 20：00',
						sasay: '+500',
					},{
						status: '微信充值',
						time: '2023-11-11 20：00',
						sasay: '+500',
					},
					],
					unfold: false //添加的元素
				},
			],

		}
	},
	methods: {
		//点击事件的方法 
		//.map()方法创建一个新数，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
		handleClick(index) {
			this.positionData = this.positionData.map((it, i) => {
				if (index === i) {
					return {
						...it, //展开运算符 【把it对象里面的属性全部列举在这里】
						unfold: !it.unfold
					}
				} else {
					return it
				}
			})
		}
	}
}
</script>

③css样式

<style>
	/* 背景颜色 */
page {
	background: #f5f5f5;
}
</style>

三、效果展示

四、小结

? ? ? ? 1.当v-if 和 v-for 需要同时使用时，不可以写在一个标签上，需要写在不同的view上

? ? ? ? 2.v-if指令用于条件性的渲染一块内容，这块内容只会在指令的表达式返回true值的时候被渲染。vue的列表渲染函数，函数内部都会进行一次if判断

????????
? ? ? ? 3.v-for指令是基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，items是源数据数组或对象，而item则是被迭代的数组元素的别名。
????????在使用v-for的时候，可以设置key值，并且保证每个key值是独一无二的。

????????4.永远不要把v-if和v-for同时用在同一个元素上，（每次渲染都会先循环再进行条件判断）。

????????5.可以在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环。