//html <link rel="stylesheet" href="http://www.jq22.com/demo/animate-141106223642/animate.min.css" /> <script src="//cdn.bootcss.com/vue/1.0.24/vue.min.js"></script> <div id="app"> <span class="area1" @click="isGet(1)" :class="[c1]">tap1</span> <span class="area1" @click="isGet(2)" :class="[c2]">tap2</span> <span class="area1" @click="isGet(3)" :class="[c3]">tap3</span> <component :is="keet" keep-alive class="animated" transition="bounce" transition-mode="out-in" ></component> </div>
//js Vue.transition("bounce", { enterClass: '', leaveClass: 'bounceInLeft' }) new Vue({ el:'#app', data:{ keet:"first", c1:'add_active', c2:'', c3:'' }, methods:{ isGet:function(val){ switch(val){ case 1:this.keet = "first";this.c1='add_active'; this.c2="";this.c3="";break; case 2:this.keet = "second";this.c1="";this.c2="add_active"; this.c3="";break; case 3:this.keet = "third";this.c1="";this.c2=""; this.c3="add_active";break; } } }, components:{ first:{ template:"<div>1</div>" }, second:{ template:"<div>2</div>" }, third:{ template:"<div>3</div>" } }, ready:function(){ } })
//css .area1{display:inline-block;width:80px;height:80px;border:1px solid #ccc;} div div{width:200px;height:200px;background:#abcdef;line-height:200px; margin-top:20px;text-align:center;font-size:30px;} .add_active{border:1px solid #f00;}
//预览结果