vue实现简单的tab切换

 点击预览

下面是代码

---

 

html

  

    
电影
    
动漫
    
图片
  
  

    
      
1
    
    
      
2
    
    
      
3
    
  

css

ul {
  height: 50px
}

ul li {
  float: left;
  width: 50px;
  height: 30px;
  border-color: #000;
  cursor: pointer;
}

.current {
  color: red
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */

  {
  opacity: 0;
}

.move-enter,
.move-leave-to {
  transform: translateY(10px) rotate(360deg)
}

.move-enter-active,
.move-leave-acitve {
  transition: all 1s
}

js

 

new Vue({
   el: '#app',
   data: {
   		num: 1
   },
   methods: {
      change: function(index) {
         this.num = index
      }
   }
})

 

之前一直用的是react, 最近简单的看了下vue文档，写了个简单的tab切换，主要是熟悉一下, 就是根据点了哪个span来对应的改变num的值，在内容的div，使用条件判断来显示对应的div