Vue学习-1（15）添加Nav样式

去看去思考 去看去思考 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 400+累计阅读 435平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄6年
关注
原创 最新推荐文章于 2026-10-14 18:20:20 发布 435 阅读 AI 写同款· GEO 优化 ›
vue导航菜单选中切换样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-... 阅读详情

  • 快捷css输入
    image-20201230201441164

  • nav.vue
    image-20201230200653454

    font-size:12px;

  • item的flex-direction，上下padding

  • .icon的宽高
    image-20210101002445089

  • 去router-link下划线，app里a{tdn；color:i}

收录于
vue学习

当前文章被收录于：

vue学习
18 篇文章 0 人学习
订阅专栏 查看详情
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
「前端基础」旺财记账Vue2版本 文章目录4 【项目】旺财 Vue 项目搭建4.1 课前准备4.2 使用@vue/cli创建项目4.3 目录结构说明4.4 添加代码片段snippets4.5 JS或TS里使用@4.6 CSS或SCSS里使用~@ 4 【项目】旺财 Vue 项目搭建 4.1 课前准备 4.2 使用@vue/cli创建项目 4.3 目录结构说明 目录: public: 一般不会变动 src: 源代码source的简写src assets(资源):除了HTML, CSS, JS, TS都放在这里. 比如图片, svg comp 阅读详情

相关推荐

vue实现nav导航栏的方法

主要为大家详细介绍了vue项目nav导航栏的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Vue:Nav导航栏和标签页联动

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。

qq_45061461的博客 1361

VSCode + Latex 配置

1. 安装VSCode VSCode下载 next，next就安装好了。 2. 配置VSCode 2.1 安装LaTeX Workshop插件 install，安装LaTeX Workshop插件 2.2 修改 user setting 点击左下角，进入用户设置 点击上图标记的部分，选择 打开settings.json 具体配置文件如下： { "latex-workshop.la...

一只特立独行的猪 10万+

用vue写轮子的一些心得（六）——nav导航栏组件

需求分析 支持横向导航竖向导航； 支持导航click展开下拉列表； 支持下拉列表click展开二级下拉列表，可任意层级； 配有展开动画； 方法实现 1、定义组件： 在html中定义 t-nav组件定义为最外层导航栏包裹器，nav-item组件包裹每一项导航名字，并且每个nav-item组件都声明一个name，用以标识每一项导航。sub-nav组件包裹含有下拉列表的导航项。 <t-nav class="box" :selected.sync="selected" vertical.

阿嚏乱码的地方 3953

Vivado Schematic视图实战：从RTL分析到布局布线，如何用它快速定位设计问题（附2019.1版操作）

本文深入解析Vivado Schematic视图在FPGA设计中的关键作用，从RTL分析到布局布线全流程，帮助工程师快速定位设计问题。通过三重视图对比、高效调试四步法和高级技巧，提升问题排查效率，缩短调试时间。文章结合2019.1版操作指南和实战案例，展示如何利用Schematic视图解决典型设计问题。

weixin_30591551的博客 490

统一大型语言模型和知识图谱：路线图

大型语言模型（LLM），如ChatGPT和GPT4，由于其涌现能力和泛化性，正在自然语言处理和人工智能领域掀起新的浪潮。然而，LLM是黑箱模型，通常无法捕捉和获取事实知识。相反，知识图谱（KGs），例如维基百科和华普，是显式存储丰富事实知识的结构化知识模型。KGs可以通过为推理和可解释性提供外部知识来增强LLM。同时，KGs很难从本质上构建和演化，这对KGs中现有的生成新事实和表示未知知识的方法提出了挑战。因此，将LLM和KGs统一在一起并同时利用它们的优势是相辅相成的。

qq_32907491的博客 2842

vue中nav导航栏的排他思想+节流思想（lodash库）

排他思想： 选择nav导航栏中一个子类，变色，并让其他子类不变色 节流思想和防抖： 节流：间隔时间，用户操作频繁，但是把频繁操作变为少量操作，少量操作还在间隔时间后执行，间隔之间内不会执行 例如王者技能：频繁点击，有时间做间隔，点击后，必须等这么一段时间才能使用 防抖：规定时间，用户操作频繁，但是只是执行最后一次，之前的回调会取消 例如王者回城：频繁点击，但是只是规定时间内最后一次点击才成功，之间

weixin_49931650的博客 842

Raid5损坏两块盘

  以下为浪潮Inspur NF5460M4型号服务器故障处理过程： 设备raid5组损坏两块硬，并raid组处理离线状态，情况如图：     由于硬盘数据比较重要，面对此情况不要慌我们尽量做到安全保守的保证数据尽可能完整，以下为处理方法，（遇raid5两块盘出现问题处理方法）   以下截图均为遇相同问题的解决图案，并非现场截图。 Ctrl+H 进WebBios界面，发现两...

chen_lipeng的博客 2万+

vue制作导航栏html,vue实现nav导航栏的方法

vue实现nav导航栏的方法2019-01-07编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了vue实现nav导航栏的方法，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。每一个网页项目都少不了导航栏，通过原始的方法基本上都是可以写出来的。但是要写出代码量少，冗余度低的代码就要动脑子思考一下了。最近写了一个百度地图的项目，要求底部有一个导航栏。具体如...

weixin_34844709的博客 1796

如何在VSCode中无缝集成Azure OpenAI GPT-5-codex？保姆级配置教程

本文详细介绍了在VSCode中无缝集成Azure OpenAI GPT-5-codex的完整配置教程，涵盖环境准备、Azure资源创建、本地配置、VSCode插件安装及高级定制。通过Codex CLI和config.toml文件配置，开发者可快速实现AI辅助编程，大幅提升代码生成、错误诊断和文档编写效率。

weixin_29268637的博客 558

uniapp：解决微信小程序包体积超过2M的优化方案+详解分包问题，编译小程序体积大于2M不能上传和预览提示体积太大的处理教程，uniApp微信小程序主包过大问题如何解决（排查可疑点+分包+最小改动）

uniapp微信小程序开发，如何解决打包太大无法预览发布的问题，uniApp微信小程序包体积超过2M的优化方法，uni-app打包微信小程序主包超2M终极解决方案，使用uniapp开发微信小程序使用uni_modules导致主包文件过大，无法发布的解决方法，UniApp开发的微信小程序主包过大问题及解决方案 编译小程序时Node-modules被打入主包，小程序体积大于2M不能上传和预览，怎么处理，解决微信小程序主包太大问题，微信小程序中主包和分包过大，详解分包问题，uni-app 微信小程序发布时，主包超

✅ 精选推荐文章 5066

Vue：导航栏制作（创建路由，跳转界面）

本文将介绍vue导航栏制作的代码。

yyyyyyyyyyy_9的博客 3636

innovus: 如何让两个generate clock balance skew group？

如题，在sdc约束中两个generate clock被设置到同一个clock group中，工具虽然会生成对应的两个skew group，但是阅读ccoot_spec发现工具并没有让两个skew group进行balance，这时就需要手动设置balance skew group。我正在「拾陆楼」和朋友们讨论有趣的话题，你⼀起来吧？

m0_61544122的博客 4051

java中nav元素_vue实现nav导航栏的方法

每一个网页项目都少不了导航栏，通过原始的方法基本上都是可以写出来的。但是要写出代码量少，冗余度低的代码就要动脑子思考一下了。最近写了一个百度地图的项目，要求底部有一个导航栏。具体如下图：首先，拿到了底部导航栏的所有图标图片，图片都有两种。灰色的代表未选中，选中的用带样色的图片替换。先看一下，组件中 html结构：通过vue提供的v-for方法，进行遍历显示footNav这个数组。数组里边存放着{t...

weixin_30800615的博客 451

Android Framework WMS面试题及参考答案

什么是 WindowManagerService（WMS）？它的作用是什么？ WindowManagerService（WMS）是 Android 系统中非常重要的一个系统服务。它运行在系统进程（system_server 进程）中。 从本质上来说，WMS 是 Android 窗口管理系统的核心。它负责管理系统中的所有窗口，包括应用程序窗口、系统窗口（如状态栏、导航栏）等。 它的主要作用有很多。首先是窗口的创建和销毁。当一个应用请求创建一个窗口时，WMS 会协调各个模块完成窗口的创建工

大模型大数据攻城狮的专栏 2165

老版QQ原生表情gif动态

这是老版的QQ表情，不过全是动态的的，Windows照片查看器是不会动的，可以右击用浏览器打开查看，再说一遍是老版的，只是分享给宁愿用老版也要动态的人。

vue项目nav导航栏的实现

每一个网页项目都少不了导航栏，通过原始的方法基本上都是可以写出来的。但是要写出代码量少，冗余度低的代码就要动脑子思考一下了。 最近写了一个百度地图的项目，要求底部有一个导航栏。具体如下图： 首先，拿到了底部导航栏的所有图标图片，图片都有两种。灰色的代表未选中，选中的用带样色的图片替换。 先看一下，组件中 html结构：通过vue提供的v-for方法，进行遍历显示footNav

王永存 3万+

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的，已经排好版了，而且还是完整的，适合小白

Element-plus修改样式

修改样式合集

daimaxiaodao的博客 8491

android 蓝牙通讯demo

android 下蓝牙通讯demo，实现了发现蓝牙，使能蓝牙，通过蓝牙发送消息。

温度PID控制PLC程序

温度PID稳定控制程序，适用于欧姆龙PLC，对其他PLC也具有很大参考价值

hello-uniapp 中的 uni-goods-nav 商品导航组件：从版本演进看电商底部导航的完整实现

uni-goods-nav 是 hello-uniapp 仓库（uni-app 官方演示项目）中收录的一款电商类商品导航组件，用于在商品详情页底部提供"加入购物车、立即购买、店铺、购物车"等快捷操作。本文以组件自身的 [changelog.md](https://link.gitcode.com/i/5deb72d7434e78ff7ff00777378c78d2) 版本演进为线索，结合组件源码与

gitblog_00933的博客 224

uniapp组件-uni-nav-bar自定义导航栏

例1 代码 <template> <view> <uni-nav-bar left-icon="arrowleft" title="标题" @clickLeft="back" /> <br> <uni-nav-bar color="#ffffff" background-color="#007AFF" :status-bar="true" left-icon="arrowleft" left-text="返回" title="标题

1万+

vue 实现顶部tab栏菜单（顶部tab按钮）切换（添加删除nav数据，适配微前端应用，滑动动画，右键菜单弹窗）

先看目标效果图 要做顶部tab栏切换，还需要配合菜单。这里主要讲tab栏的实现方式。 首先为了在样式效果上实现方便，这里决定使用element-ui的el-tabs标签来做。这样只需要改下样式，其他效果例如切换动画都能保存。 当然，除了el-tabs自带的删除等事件，这里还需要添加右键事件，在右键事件里面有关闭全部和关闭其他两个事件选项 html和css 先来看html部分和css部分 <template> <div class="navBar" ref="navBar">

东扯葫芦西扯瓜——前端小菜鸟的博客 4594

uni-goods-nav 商品导航组件实战：hello-uniapp 电商底部导航从接入到源码解析

uni-goods-nav 是 uni-ui 体系中面向电商场景的底部商品导航组件，本仓库中它以 uni_modules 规范随 [hello-uniapp](https://link.gitcode.com/i/a7af7c0c5a89e230e52bae2537ca0ee2) 项目集成，用于承载「加入购物车、立即购买、联系客服、查看店铺」等典型商品操作栏。本文以组件官方 readme（[uni

gitblog_00176的博客 336

黑马程序员前端 Vue3 小兔鲜电商项目——（三）Layout 首页页面布局

黑马程序员前端 Vue3 小兔鲜电商项目——（三）Layout 首页页面布局

赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。 5403

vue2路由初步学习

1. 路由的模式和区别1. 路由的模式和区别1.1 hash模式(默认)使用 URL 的 hash (服务器端特殊配置找不到当前页面向后端发送一次请求项目。

Smjbid的博客 2079

vue-router中的router-link的active-class

vue-router中的router-link的active-class 在 router.js 中设置默认样式名字 const router = new VueRouter({ linkActiveClass: 'active', }) <template> <div class="nav"> <router-link to="./goods" class="nav-item"> 商品 <i class="line"&gt

rojie0的博客 1026
上一篇： Vue学习-1（14）封装 icon 组件
下一篇： Vue学习-1（16）active-class选中变色
点赞 0
评论 0
书签 书签 0
去看去思考
去看去思考
博客等级 码龄6年 1粉丝 21原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值