<style> .active{ color: red; } div a{ display: block; } </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <!--
1 循环除数据中的菜单选项
<li v-for="(v,i) in newInfo"> v表示数组newInfo中的所有数据
因此要获取菜单直接 v.typeName
2 获取当前点击的是第几个菜单选项
因此有点击事件 @click="index=i" 可以知道当前点击的是第几个元素的下标 赋值给index
3 第一个item表示的 newInfo下的所有数据
第一个info表示item.newList下的所有数据
4此时已经将所有的数据都已经展示出来了 如何只展示相关的数据
利用v-show结合索引值 index的菜单索引 是否 与内容索引i相等 v-show="index===i"
5给当前点击的菜单添加激活类
:class="{active:index===i}" 如果active等于true 就展示添加激活类
-->
<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>
