vue组件中 IS 用法

Posted 2020-08-28

//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;}

//预览结果