vue切換列表顯示隱藏

<!--這裏是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>

感謝博主：http://blog.csdn.net/Coding_Jia/article/details/72717019

 

特別提醒vue不支持 經過map 原始數組根據索引插入  show=true, /show=false 的動態數據修改