<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. MyBatis与log4j
			
    1.前言   在项目中编写Sysem.out.prinltn()的时候,是输出到控制台的,当项目发布到tomcat之后,是没有控制台的,不过可以在命令行界面还能看见,但是不容易观察一些输出结果.log ...
    
			
    2. 
						
  2. mssql sqlserver 添加表注释和添加列注释的方法分享
			
     转自: http://www.maomao365.com/?p=8919 摘要: 下文讲述使用sql脚本对数据表或数据列添加注释(备注说明)的方法分享,如下所示: 实验环境:sql server 2 ...
    
			
    3. 
						
  3. android 圆角ImageView类，可设置弧度
			
    public class RoundImageView extends ImageView { private Paint paint; private int roundWidth = 50; pr ...
    
			
    4. 
						
  4. Python xlwt 写Excel相关操作记录
			
    1.安装xlwt pip install xlwt 2.写Excel必要的几步 import xlwt book = xlwt.Workbook() #创建一个workbook,无编码设置编码book ...
    
			
    5. 
						
  5. Jenkins实现单一安卓项目打包多个module填坑实录
			
    今天接手一个任务,已有项目结构上新添加了一个module,这个module打包工作需要在Jenkins上添加一个方便测试点击的打包工程 因为之前已有现成的打包工程,我直接新建了一个工程并且复制原有工程 ...
    
			
    6. 
						
  6. 0day2安全——笔记1
			
    第一章 PE和内存之间的映射 节偏移 文件偏移地址(File Offset Address):数据在PE文件中的地址 装载地址(Image Base):PE装入内存的基地址 虚拟内存地址(Virtua ...
    
			
    7. 
						
  7. layUI学习第五日：layUI布局系列二
			
    6.列偏移 列偏移可针对不同屏幕的标准进行设定,只会在桌面屏幕下有效,当低于桌面屏幕的规定的临界值,就会堆叠排列. <div class="layui-col-md4 layui-co ...
    
			
    8. 
						
  8. LeetCode 205：同构字符串	Isomorphic Strings
			
    题目: 给定两个字符串 s 和 *t*,判断它们是否是同构的. 如果 s 中的字符可以被替换得到 *t* ,那么这两个字符串是同构的. 所有出现的字符都必须用另一个字符替换,同时保留字符的顺序.两个字 ...
    
			
    9. 
						
  9. 洛谷 P2602（数位DP）
			
    ### 洛谷 P2602 题目链接 ### 题目大意:给你一个区间,问你区间所有数字中,0.1.2 .... 9 的个数的总和分别为多少. 分析: 枚举 0 ~ 9 进行数位 DP 即可. 注意记忆化 ...
    
			
    10. 
						
  10. IDA+Windbg IDA+OD 连动调试插件
			
    https://github.com/bootleg/ret-sync 使用注意事项:多次测试,最好现在IDA中启动,然后再在OD或WINDBG(.load sync)中启动. 这个工具还是相当给力的 ...
    
			
    11.