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 的动态数据修改 

 

转载于:https://www.cnblogs.com/shuaitong/p/8590769.html