vue之tab切换
<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切换的更多相关文章
- vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
- vue封装tab切换
vue封装tab切换 预览: 第一种 通过父传子标题,子传父事件 子组件 <template> <div class='app'> <div class="ta ...
- vue实现tab切换功能
最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...
- VUE 实现tab切换页面效果
一 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- vue实现tab切换
需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感 <!DOCTYPE html> <html lang="en"> <h ...
- vue -vantUI tab切换时 list组件不触发load事件解决办法
最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
- Vue如何tab切换高亮最简易方法
以往我们实现tab切换高亮通常是循环遍历先把所有的字体颜色改变为默认样式,再点亮当前点击的选项,而我们在vue框架中实现tab切换高亮显示并不需要如此,只需要将当前点击选项的index传入给一个变量, ...
- vue实现tab切换功能精简版
<template> <div> <p class="tabs" v-for="(list,index) in lists" :c ...
- vue类似tab切换的效果，显示和隐藏的判断。
两者切换,动态显示对应的列表详情. 通过v-show的判断 数据驱动
随机推荐
- SQL Server有意思的数据类型隐式转换问题
写这篇文章的时候,还真不知道如何取名,也不知道这个该如何将其归类.这个是同事遇到的一个案例,案例比较复杂,这里抽丝剥茧,仅仅构造一个简单的案例来展现一下这个问题.我们先构造测试数据,如下所示: CRE ...
- 并发编程~~~多线程~~~计算密集型 / IO密集型的效率, 多线程实现socket通信
一 验证计算密集型 / IO密集型的效率 IO密集型: IO密集型: 单个进程的多线程的并发效率高. 计算密集型: 计算密集型: 多进程的并发并行效率高. 二 多线程实现socket通信 服务器端: ...
- LInux：YUM源安装工具的配置及使用
YUM源的设置及使用 YUM工具简介 (1)YUM(Yellow dog Upadate Modifie)是改进版的 RPM 管理器,很好地解决了 RPM 软件包的依赖问题. (2)YUM 可以从很多 ...
- 苏州市java岗位的薪资状况（2）
上一篇已经统计出了起薪最高的top 10: 接着玩,把top 10 中所有职位的详细信息爬取下来.某一职位的详情是这样: 我们需要把工作经验.学历.职能.关键字爬取下来. from urllib.re ...
- 【转载】C++：switch红色下划线，Error:控制传输跳过的实例化解决办法
转载链接:https://blog.csdn.net/figoleon/article/details/50072029
- OMM机制（占位）
由于没有swap分区,导致系统启动omm机制,把mysql干掉
- LG1131 「ZJOI2007」时态同步 树形DP
问题描述 LG1131 题解 正难则反,把从一个点出发到叶子结点看做从叶子结点走到那个点. DP方程很显然. \(\mathrm{Code}\) #include<bits/stdc++.h&g ...
- 第五章 与HTTP协作的Web服务器
第五章 与HTTP协作的Web服务器 一台Web服务器可搭建多个独立域名的Web网站,也可以作为通信路径上的中转服务器提升传输效率. 1.用单台虚拟机实现多个域名 HTTP/1.1规范允许一台HTT ...
- vue--npm的使用
npm介绍 NPM 全称 Node Package Manager,它是 JavaScript 的包管理工具, 并且是 Node.js 平台的默认包管理工具.通过NPM 可以安装.共享.分发代码,管理 ...
- Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3) E. Arson In Berland Forest 二分 前缀和
E. Arson In Berland Forest The Berland Forest can be represented as an infinite cell plane. Every ce ...