<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#app {
width: 500px;
margin: 100px auto;
}
ul {
list-style: none;
border: 1px solid #d8d8d8;
padding-left: 20px;
}
p {
border: 1px solid #d8d8d8;
height: 50px;
line-height: 50px;
padding: 0px 20px;
}
h2 {
height: 60px;
line-height: 60px;
text-align: center;
}
.two {
float: right;
font-size: 18px;
}
.one {
font-weight: 900;
font-size: 18px;
}
</style>
</head>
<body>
<div id="app">
<h2>案例：折叠面板</h2>
<p><span class="one">芙蓉楼送辛渐 </span> <span class="two" @click="toggle">{{isShow?'收起':'折叠'}}</span></p>
<ul v-show="isShow">
<li>寒雨连江夜入吴,</li>
<li>平明送客楚山孤。</li>
<li>洛阳亲友如相问，</li>
<li>一片冰心在玉壶。</li>
</ul>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isShow:'收起'
},
methods:{
toggle(){
this.isShow=!this.isShow
}
}
})
</script>
</body>
</html>
