<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. MySQL数据库：注释及数据类型
			
    注释 /* 多行注释 */ # 单行注释 -- 单行注释(注意:两个但横线后面必须加空格) 数据类型 1.整形 ​ tinyint.smallint.mediumint.int.bigint ​ 小整 ...
    
			
    2. 
						
  2. 初级模拟电路：3-8 BJT数据规格书（直流部分）
			
    回到目录 本小节我们以2N4123通用型BJT硅基晶体管为例,来介绍如何阅读BJT的数据规格书,点此链接可以阅读和下载2N4123的数据规格书. 1. 总体性能 打开datasheet后,首先看标题: ...
    
			
    3. 
						
  3. node.js守护进程问题的解决
			
    最近自己写了一个node.js来读取redis数据,编写完成后按理来说加& 应该是有效的 nohup node redis.js & 但是每次关闭终端后这个进程就自动停止了,百度了下  ...
    
			
    4. 
						
  4. C++ 虚函数的说明
			
    虚函数的几点说明: 1. 当一个成员函数定义为虚函数时,其派生类中的同名函数也自动为虚函数.无论其是否添加了 virtual 关键字. 为了能良好的阅读代码,请加上. 2. 父类的虚函数,就是为了让子 ...
    
			
    5. 
						
  5. 【oracle】表和索引建立在不用表空间原因
			
    磁盘I/O竞争,要放在[真]的不同的磁盘上. Oracle强烈建议,任何一个应用程序的库表至少需要创建两个表空间,其中之一用于存储表数据,而另一个用于存储表索引数据.因为如果将表数据和索引数据放在一起 ...
    
			
    6. 
						
  6. Codechef October Challenge 2019 Division 1
			
    Preface 这次CC难度较上两场升高了许多,后面两题都只能借着曲明姐姐和jz姐姐的仙气来做 值得一提的是原来的F大概需要大力分类讨论,结果我写了一大半题目就因为原题被ban了233 最后勉强涨了近 ...
    
			
    7. 
						
  7. [LeetCode] 42. Trapping Rain Water 收集雨水
			
    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...
    
			
    8. 
						
  8. MySQL数据库实战之优酷
			
    目录 一.项目总结三步骤 二.项目需求分析 三.搭建框架 四.ORM框架分析 五.数据库设计 六.项目中各个功能模块分析 七.项目中遇到的问题及怎么解决的 八.客户端代码框架 8.1 conf 8.1 ...
    
			
    9. 
						
  9. [开源] FreeSql 配套工具，基于 Razor 模板实现最高兼容的生成器
			
    FreeSql 经过半年的开发和坚持维护,在 0.6.x 版本中完成了几大重要事件: 1.按小包拆分,每个数据库实现为单独 dll: 2.实现 .net framework 4.5 支持: 3.同时支 ...
    
			
    10. 
						
  10. 常用的app包名和类名
			
    应用 包名 启动类 QQ com.tencent.mobileqq com.tencent.mobileqq.activity.HomeActivity 微信 com.tencent.mm com.t ...
    
			
    11.