<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>


												


											
vue之tab切换的更多相关文章
	

    
						
  1. vue 实现tab切换动态加载不同的组件
		
    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
    
		
    2. 
						
  2. vue封装tab切换
		
    vue封装tab切换 预览: 第一种 通过父传子标题,子传父事件 子组件 <template> <div class='app'> <div class="ta ...
    
		
    3. 
						
  3. vue实现tab切换功能
		
    最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...
    
		
    4. 
						
  4. VUE  实现tab切换页面效果
		
    一 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
    
		
    5. 
						
  5. vue实现tab切换
		
    需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感 <!DOCTYPE html> <html lang="en"> <h ...
    
		
    6. 
						
  6. vue -vantUI tab切换时 list组件不触发load事件解决办法
		
    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
    
		
    7. 
						
  7. Vue如何tab切换高亮最简易方法
		
    以往我们实现tab切换高亮通常是循环遍历先把所有的字体颜色改变为默认样式,再点亮当前点击的选项,而我们在vue框架中实现tab切换高亮显示并不需要如此,只需要将当前点击选项的index传入给一个变量, ...
    
		
    8. 
						
  8. vue实现tab切换功能精简版
		
    <template> <div> <p class="tabs" v-for="(list,index) in lists" :c ...
    
		
    9. 
								
  9. vue类似tab切换的效果，显示和隐藏的判断。
		
    两者切换,动态显示对应的列表详情. 通过v-show的判断 数据驱动
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Linuxautofs自动挂载服务
			
    autofs服务程序是一种Linux系统守护进程,当检测到用户试图访问一个尚未挂载的文件系统时,将自动挂载该文件系统.将信息填入/etc/fstab文件后,系统在每次开机时都自动将其挂载,而autof ...
    
			
    2. 
						
  2. 80道最新java基础部分面试题（六）
			
    自己整理的面试题,希望可以帮到大家,需要更多资料的可以私信我哦,大家一起学习进步! 59.ArrayList和Vector的区别 答: 这两个类都实现了List接口(List接口继承了Collecti ...
    
			
    3. 
						
  3. 关于sublime建立python工程的说明
			
    https://www.zhihu.com/question/22681628此链接说明的不错,可以参考. 为了方便使用sublime,难免要定义一些快捷键,https://www.whidy.net ...
    
			
    4. 
						
  4. 【转】Java中的关键字 transient
			
    阅读目录 先解释下Java中的对象序列化 关于transient关键字 举个例子 参考资料 先解释下Java中的对象序列化 在讨论transient之前,有必要先搞清楚Java中序列化的含义: Jav ...
    
			
    5. 
						
  5. Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3)  F2. Wrong Answer on test 233 (Hard Version) dp 数学
			
    F2. Wrong Answer on test 233 (Hard Version) Your program fails again. This time it gets "Wrong  ...
    
			
    6. 
						
  6. 【STM32H7教程】第17章    STM32H7之GPIO的HAL库API
			
    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第17章       STM32H7之GPIO的HAL库API ...
    
			
    7. 
						
  7. Java-100天知识进阶-Java内存-知识铺（四）
			
    知识铺: 致力于打造轻知识点,持续更新每次的知识点较少,阅读不累.不占太多时间,不停的来唤醒你记忆深处的知识点. 1.Java内存模型是每个java程序员必须掌握理解的 2.Java内存模型的主要目标 ...
    
			
    8. 
						
  8. 开发常用Git/Linux/idea命令快捷键总结（持续更新）
			
    在开发过程中,会使用越来越多的命令,或快捷键,来帮助我们提高工作效率.本文记录了我在平时积累的常用命令,分享给大家. git命令 基本命令 set LESSCHARSET=utf-8 --idea T ...
    
			
    9. 
						
  9. Do Deep Nets Really Need to be Deep?
			
    url: https://arxiv.org/pdf/1312.6184.pdf year: NIPS2014 浅网络学习深网络的函数表示, 训练方法就是使用深网络的 logits(softmax i ...
    
			
    10. 
						
  10. MySQL-8.0.18 引入了破坏性变更
			
    MySQL-8.0.18 引入了破坏性变更 变更日志里面有这样一项 When the server is run with --initialize, there is no reason to lo ...
    
			
    11.