vue element实现展开收起效果

vue elementUI 实现展开收起功能

使用element的switch组件#

html

<div class="contain">
		<div class="listStyle">
			<div>列表</div>
			<el-switch v-model="value1" active-text="展开" inactive-text="收起"></el-switch>
		</div>
		<div v-if="value1 === true" style="">
			<p>早起的鸟儿有虫吃，早起的虫儿被鸟吃!</p>
			<p>是金子，总会花光的;是镜子，总会反光的。</p>
		</div>
	</div>

js

export default {
	data() {
		return {
			value1: false,
		};
	},
};

css

这里使用了less

.contain {
	width: 100%;
	height: 200px;
	border: 1px solid #000;
	// background-color: #ccc;
	display: flex;
	align-items: center;
	flex-direction: column;
	.listStyle {
		width: 500px;
		// background-color: paleturquoise;
		// border: 1px solid #000;
		display: flex;
		justify-content: space-between;
	}
}

效果

收起效果

收起效果