vue实现简单的tab切换

 点击预览

下面是代码

---

 

html

<div id="app">
  <ul>
    <li><span v-bind:class="{current: num == 1}" v-on:click="change(1)">电影</span></li>
    <li><span v-bind:class="{current: num==2}" v-on:click="change(2)">动漫</span></li>
    <li><span v-bind:class="{current: num==3}" v-on:click="change(3)">图片</span></li>
  </ul>
  <div class="content">
    <transition name="fade">
      <div v-show="num == 1">1</div>
    </transition>
    <transition name="move">
      <div v-show="num == 2">2</div>
    </transition>
    <transition name="fade">
      <div v-show="num == 3">3</div>
    </transition>
  </div>
</div>

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