vue之tab切换
发布日期：2021-05-25 01:14:33
浏览次数：11
分类：博客文章
本文共 796 字，大约阅读时间需要 2 分钟。
<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>
发表评论
最新留言
做的很好，不错不错
[***.243.131.199]2025年05月08日 14时34分29秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
折线图上放面积并隐藏XY轴的线
2019-03-15
failed to push some refs to git
2019-03-15
在苹果Mac上如何更改AirDrop名称？
2019-03-15
1110 Complete Binary Tree (25 point(s))
2019-03-15
541【毕设课设】基于单片机电阻电感电容RLC测量仪系统
2019-03-15
568【毕设课设】基于单片机多路温度采集显示报警控制系统设计
2019-03-15
基于8086交通灯系统仿真设计（微机原理设计资料）
2019-03-15
解读域名管理之：域名注册机构介绍
2019-03-15
找中位数
2019-03-15
这些运维发展方向及系统运维技能都不了解，怎么能吃透Linux？？
2019-03-15
自动化测试——UI自动化测试的痛点
2019-03-15
如何将萌推商品主图、属性图、详情图批量保存到电脑的方法
2019-03-15
2021年N1叉车司机模拟考试及N1叉车司机考试软件
2019-03-15
【奇淫巧技】Java动态代理（JDK和cglib）
2019-03-15
【Stimulsoft Reports.Net教程】使用DesignerFx
2019-03-15
攻防世界 Pwn 新手
2019-03-15
mybtis-plus 出现 Wrong namespace
2019-03-15
用户登陆的验证码的制作
2019-03-16
升级java11后，maven命令打包报错
2019-03-16
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 462682894 位访客