vue实现tab切换效果

1.html部分

<ul v-model="menuNow" class="TabMenu clearfix">
  <li class="fl" v-bind:class="{active:menuNow=='tab1'}" @click="setMenu('tab1')">tab1</li>
  <li class="fl" v-bind:class="{active:menuNow=='tab2'}" @click="setMenu('tab2')">tab2</li>
  <li class="fl" v-bind:class="{active:menuNow=='tab3'}" @click="setMenu('tab3')">tab3</li>
</ul>
<div class="TabContent">
  <tab1 v-if="menuNow === 'tab1'"></tab1>
  <tab2 v-if="menuNow === 'tab2'"></tab1>
  <tab3 v-if="menuNow === 'tab3'"></tab1>
</div>

2.js部分

import tab1 from './subTab/tab1'
import tab2 from './subTab/tab2'
import tab3 from './subTab/tab3'
export default {
  name: 'tab',
  components:{
    'tab1':tab1,
    'tab2':tab2,
    'tab3':tab3
  },
  data () {
    return {
      menuNow: ''
    }
  },
  methods:{
    setMenu(menu){
      this.menuNow=menu;
    }
  }
}