分析:
①: 准备标签和样式, 下载less模块和less-loader@5.0.0模块
②: 完成页面结构和样式部分
③: 按钮绑定点击事件
④: 声明变量isShow来控制下面标签是否显示/隐藏
④: 点击时, 改变isShow的值, 来影响页面效果
<template>
<div id="app">
<div>
<h3>折叠面板demo</h3>
<div class="title">
<h4>芙蓉楼送辛渐</h4>
<span class="btn" @click="btn">
<!--根据 isShow 的值显示 收起/隐藏-->
{{ isShow ? '收起' : '展开'}}
</span>
</div>
<!--v-show配合标签的隐藏和显示-->
<div class="container" v-show="isShow">
<p>寒雨连江夜入吴</p>
<p>平明送客楚山孤</p>
<p>洛阳亲友如相问</p>
<p>一片冰心在玉壶</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
data () {
return {
isShow: true
}
},
methods: {
btn() {
// 点击时隐藏
this.isShow = !this.isShow
}
}
}
</script>
<style scoped lang="less">
body {
background-color: #ccc;
#app {
width: 400px;
margin: 20px auto;
background-color: #fff;
border: 4px solid blueviolet;
border-radius: 1em;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
padding: 1em 2em 2em;
h3 {
text-align: center;
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
padding: 0 1em;
}
.title h4 {
line-height: 2;
margin: 0;
}
.container {
border: 1px solid #ccc;
padding: 0 1em;
}
.btn {
/* 鼠标改成手的形状 */
cursor: pointer;
}
}
}
</style>