<style>
.active{
color: red;
}
div a{
display: block;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<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>