vue之tab切换

<body>

<div id="myApp">

<li v-for="(v,i) in newInfo" @click="index=i" :class="{active:index===i}">
{{v.typeName}}
</li>

<div v-for="(item,i) in newInfo" v-show="index===i">
<a :href="info.url" v-for="info in item.newList">{{ info.title}}</a>
</div>
</div>
</body>

<script>
var vm = new Vue({
    el: '#myApp',
    // data应该是一个对象哦
    data: {
        index: 0, //表示索引值
        newInfo: [{
                typeName: "军事",
                newList: [{
                        title: "美国发誓“毫不留情”对抗伊朗",
                        url: "http://news.ifeng.com/a/20181107/60149207_0.shtml?_zbs_baidu_news"
                    },
                    {
                        title: "普京主动送给中国一大宝贝 白宫：必须制止",
                        url: "http://hot.qianyan001.com/20181108/787511_1.html"
                    }
                ]
            },
            {
                typeName: "娱乐",
                newList: [{
                        title: "众星出席时装电影盛典 周迅赵薇baby杨幂唐嫣同框",
                        url: "http://fun.youth.cn/gnzx/201811/t20181108_11778380.htm"
                    },
                    {
                        title: "张艺兴发博回应海外人气质疑：榜单见不如舞台见",
                        url: "http://new.qq.com/omn/20181107/20181107A0UQZ9.html"
                    },
                    {
                        title: "昆凌晒照带儿女秋日游玩 周杰伦委屈评论：也不带我",
                        url: "http://ent.ifeng.com/a/20181108/43134878_0.shtml"
                    }
                ]
            },

            {
                typeName: "财经",
                newList: [{
                        title: "房价真跌了？2018年10月热点城市“房价地图”1",
                        url: "http://new.qq.com/zt/template/?id=FIN2018100800260300"
                    },
                    {
                        title: "房价真跌了？2018年10月热点城市“房价地图”2",
                        url: "http://new.qq.com/zt/template/?id=FIN2018100800260300"
                    },
                    {
                        title: "房价真跌了？2018年10月热点城市“房价地图”3",
                        url: "http://new.qq.com/zt/template/?id=FIN2018100800260300"
                    }
                ]
            }
        ]
    }
})
</script>