vueelement实现展开收起效果vue elementUI 实现展开收起功能
使⽤element的组件#
html
<div class="contain">
vue element admin
<div class="listStyle">
<div>列表</div>
<el-switch v-model="value1" active-text="展开" inactive-text="收起"></el-switch>
</div>
<div v-if="value1 === true" >
<p>早起的鸟⼉有⾍吃，早起的⾍⼉被鸟吃!</p>
<p>是⾦⼦，总会花光的；是镜⼦，总会反光的。</p>
</div>
</div>
js
export default {
data() {
return {
value1: false,
};
},
};
css
这⾥使⽤了
.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;
}
}
效果
收起效果
收起效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。