<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
li {
list-style: none;
100%;
}
.des {
100%;
height: 50px;
background-color: grey;
display: none;
}
.show {
display: block;
}
/*淡入淡出效果*/
.fade-enter-active, .fade-leave-active {
transition: all .2s;
}
.fade-enter, .fade-leave-active {
opacity: 0;
height: 0px;
}
</style>
</head>
<body>
<div id="app">
<div>
<li>
<p @click="toggle">{{title}}</p>
<transition name="fade">
<div class='des' :class='{show:active}'>
{{text}}
</div>
</transition>
</li>
</div>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
title:'aaaaaa',
text:'dcvgg',
active:false,
},
methods:{
toggle:function(){
this.active=!this.active;
}
}
})
</script>
</html>