实现单击一个按钮后，切换盒子的展开和收起状态
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单击按钮实现盒子的展开和收起</title></head><script src="./JS/vue.js"></script><style> /* 初始状态 */ #app{ margin: 0,auto; } .box{ margin: 20px; width: 150px; height: 200px; background-color: cadetblue; text-align: center; line-height: 200px; } button{ margin-left: 20px; } /* 进入和离开的过程 */ .Box-enter-active,.Box-leave-active{ transition: all 2s; } .Box-enter,.Box-leave-to{ width: 0px; height: 0px; } .Box-enter-to,.Box-leave{ width: 150px; height: 200px; }</style><body> <div id="app"> <button @click="cancel">{{mag}}</button> <transition name="Box"> <div class="box" v-if="show"></div> </transition> </div><script> var vm =new Vue({ el:'#app', data:{ show:true, mag:'收起' }, methods:{ cancel(){ this.show=!this.show; if(this.show==false){ this.mag='展开'; } else if(this.show==true){ this.mag='收起'; } } } })</script></body></html>