目标: 点击展开或收起时，把内容区域显示或者隐藏
1.将数据渲染到页面
2. 注册监听事件 进行逻辑处理
<style>
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;
}
#app 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>
</head>
<body>
<div id="app">
<h3>案例：折叠面板</h3>
<div>
<div class="title">
<h4>芙蓉楼送辛渐</h4>
<span @click="A" class="btn">
{{Name}}
</span>
</div>
<div v-show="flag" class="container">
<p>寒雨连江夜入吴,</p>
<p>平明送客楚山孤。</p>
<p>洛阳亲友如相问，</p>
<p>一片冰心在玉壶。</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: true,
Name: '收起',
},
methods: {
A() {
// this.flag = !this.flag
// this.Name = this.flag ? '收起' : '展开'
if (this.flag) {
this.flag = false
this.Name = '收起'
}
else {
this.flag = true
this.Name = '展开'
}
},
}
})
</script>
</body>
1908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
