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的判断 数据驱动
随机推荐
- jmeter使用问题——数据库无法连接
使用Jmeter 数据库连接配置组件,执行sql时jmeter日志报错 WARN o.a.j.p.j.p.AbstractJDBCProcessor: SQL Problem in 查询账号申诉ID: ...
- clientHeight—scrollHeight—offsetHeight三者的区别
clientHeight,scrollHeight,offsetHeight 这三个dom属性有时让人觉得相似但又不相似 以前对它们的理解也有一些模糊,现在总结一下,方便以后复习 clientHeig ...
- njnja 安装
git clone git://github.com/ninja-build/ninja.git && cd ninja 安装re2c wget https://kojipkgs.f ...
- hdu-6415 计数DP
Nash Equilibrium is an important concept in game theory. Rikka and Yuta are playing a simple matrix ...
- 知识图谱如何运用于RecomSys
将知识图谱作为辅助信息引入到推荐系统中可以有效地解决传统推荐系统存在的稀疏性和冷启动问题,近几年有很多研究人员在做相关的工作.目前,将知识图谱特征学习应用到推荐系统中主要通过三种方式——依次学习.联合 ...
- python-3.8.0 新特性之赋值表达式
[python-3.8.0 新特性之赋值表达式] 赋值表达式的语法是这样的“ name := expression ”,形式上看和赋值语句 “ = ” 差不多,就作用上来看也雷同.也就是说 “:=” ...
- ajax运行原理
Ajax应用程序的加载过程与传统的Web应用程序类似.某个用户操作引发浏览器的一次HTTP请求.服务器接收请求并处理这个请求,生成合适的执行结果发送至客户端.客户端浏览器经过处理将数据(HTML+CS ...
- Knative 实战：一个微服务应用的部署
作者 | 元毅 阿里云智能事业群高级开发工程师 在 Istio 中提供了一个 Bookinfo 的示例,用于演示微服务之间的调用,那么如何在 Knative 中部署这个示例呢?本文将会给大家介绍一下在 ...
- Python - ^在正则表达式中的作用
^在正则表达式中有两个作用,一是表达以什么开头,二是表达对什么取反.有时候经常傻傻的分不清楚,接下来给大家详细介绍该怎么用这个^准备一个python文件test.py,借用re.search函数举例说 ...
- 什么是SFP光模块？
什么是光模块? 光模块(optical module)由光电子器件.功能电路和光接口等组成,光电子器件包括发射和接收两部分.简单的说,光模块的作用就是光电转换,发送端把电信号转换成光信号,通过光纤传送 ...