Vue实现tab切换效果

<!--这里是html结构-->
<div id="app">
     <ul>
         <li 
         v-for="(item,index) in tabs" 
         :class="{active:index == num}"
          @click="tab(index)">{{item}}</li>
     </ul>
     <div class="tabCon">
         <div 
         v-for='(itemCon,index) in tabContents' 
         v-show=" index == num">{{itemCon}}</div>
     </div>
 </div>
<!--这里是js代码-->
<script type="text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        tabs: ["标题一", "标题二","标题三"],
        tabContents: ["内容一", "内容二","内容三"],
        num: 1
    },
    methods: {
        tab(index) {
            this.num = index;
        }
    }
});
</script>

使用vue.js实现tab切换很简单，先使用v-for把数据遍历渲染到页面上，v-for中有一个index表示索引，将index作为参数传入到tab（index）这个函数中，在data中定义一个num变量，在title中如果index==num,这个title就会添加一个acive的class。当然，这个num是需要在tab（）这个函数中不断改变的，需要将传入的索引值赋值给num，这样在.tabCon里，我们就可以用v-show做下判断。v-show=”index==num”,如果等于的话，当前的内容就会显示。否则隐藏。
我感觉学习vue，首先把以前的那种传统思维转变过来是主要的，其次就是不断实践，不断的敲代码，才可以更深入的学习Vue.js。