vue of the tab to switch

<body>
<-!
. 1 cycle of data in addition to the menu options
<li v-for = "( v, i) in newInfo"> v represents all the data in the array newInfo
so to directly obtain the menu v.typeName

2 acquires the current click is the first of several menu options
and therefore there is a click event @ click = "index = i" can know the current click is the index of the first several elements assigned to index

all the data in the first 3 newInfo item represented the
first a represents all the data in the info item.newList

. 4 now has all the data it has been shown how to show only the relevant data
using the menu whether the index v-show binding index value index of the content index i is equal to v-show = "=== I index"

. 5 is added to the current click menu activation class
: class = "{active: index === i}" is equal to true if the active type on the display of added activated
->
<div ID = "myApp">
<! - menu options ->
<= for Li-V "(V, I) in newInfo" = @ the Click "index = I": class = "Active {:} I index ===">
{{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 Oh be an object 
    data: {
        index: 0 , // denotes the index value 
        newInfo: [{
                typeName: " military " ,
                newList: [{
                        title: " United States vowed" relentless "against Iran " ,
                        url: "http://news.ifeng.com/a/20181107/60149207_0.shtml?_zbs_baidu_news"
                    },
                    {
                        title: " Putin's initiative to give China a big baby White House: must be stopped " ,
                        url: "http://hot.qianyan001.com/20181108/787511_1.html"
                    }
                ]
            },
            {
                typeName: " entertainment " ,
                newList: [{
                        title: " the stars attending the Fashion Film Festival Zhao Wei Zhou Xun Yang Mi Tang Yan with baby box " ,
                        url: "http://fun.youth.cn/gnzx/201811/t20181108_11778380.htm"
                    },
                    {
                        title: " Zhang Yixing sent overseas popularity Bo responded the question: better to see the list see the stage " ,
                        url: "http://new.qq.com/omn/20181107/20181107A0UQZ9.html"
                    },
                    {
                        title: " Kunling sun shine autumn children play with Jay wronged Comments: do not take me " ,
                        url: "http://ent.ifeng.com/a/20181108/43134878_0.shtml"
                    }
                ]
            },

            {
                typeName: " Finance " ,
                newList: [{
                        title: " prices really fell in October 2018 hot cities?" prices map "1 " ,
                        url: "http://new.qq.com/zt/template/?id=FIN2018100800260300"
                    },
                    {
                        title: " prices really fell in October 2018 hot cities?" prices map "2 " ,
                        url: "http://new.qq.com/zt/template/?id=FIN2018100800260300"
                    },
                    {
                        title: " prices really fell in October 2018 hot cities?" prices map "3 " ,
                        url: "http://new.qq.com/zt/template/?id=FIN2018100800260300"
                    }
                ]
            }
        ]
    }
})
</script>

vue of the tab to switch

Guess you like