uniapp Vue3 面包屑导航 带动态样式

上干货

 

<template><view class="bei"><view class="container"><view class="indicator"></view><!-- 遍历路由列表 --><view v-for="(item, index) in routes" :key="index" :class="['foritem', {'selected': item.to === selectedRoute}]" @click="dianji(item)"><view class="item">{{ item.name }}</view></view></view></view><view class="tip" v-if="selectedPage == 'A'">您已转到 {{ selectedPage }} 页面</view><view class="tip" v-if="selectedPage == 'B'">您已转到 {{ selectedPage }} 页面</view><view class="tip" v-if="selectedPage == 'C'">您已转到 {{ selectedPage }} 页面</view>
</template><script setup>import { onMounted, ref } from "vue"// 定义路由列表const routes = ref([{to: "A",name: "A页面",},{to: "B",name: "B页面",},{to: "C",name: "C页面",},])// 当前选中的路由const selectedRoute = ref("")// 当前选中的页面const selectedPage = ref("")// 点击路由项的处理函数function dianji(item) {console.log("点击", item.to)selectedRoute.value = item.toselectedPage.value = item.toconst index = routes.value.findIndex(route => route.to === item.to)}// 组件挂载后的初始化onMounted(() => {selectedRoute.value = "A" // 将"A页面"设置为被点击状态selectedPage.value = "A" // 设置初始提示信息})
</script>

教学地址

点击跳转教学页面

完整源码下载地址

点击跳转下载页面

也可以添加下方的名片进行咨询

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/582302.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

听GPT 讲Rust源代码--src/tools(28)

File: rust/src/tools/clippy/clippy_lints/src/operators/identity_op.rs 文件路径 rust/src/tools/clippy/clippy_lints/src/operators/identity_op.rs 中的作用是定义了 IdentityOp 类型的 Clippy lint 规则&#xff0c;用于检查代码中是否存在不必要的恒等操作符&#xff0…

五种主流数据库:实现数据过滤

在实际应用中&#xff0c;我们通常无须返回表中的全部数据&#xff0c;大多数情况下只需检索满足特定条件的记录。例如&#xff0c;查找某个部门中的员工或者当前用户未完成的订单。 本文比较五种主流数据库数据过滤功能的实现和差异&#xff0c;包括 MySQL、Oracle、SQL Serv…

【字符串工具类】StringJoiner使用详解

关于StringJoiner 1.介绍2.源码2.1 属性2.2 方法 3 举例StringJoiner做法3.1 只含间隔符3.2 含间隔符和前后缀3.3 merge合并两个joiner3.4 stringJoiner.setEmptyValue("xxx");3.5 综合举例length()方法 1.介绍 在JDK1.8之后&#xff0c;提供了一个StringJoiner类用来…

洛谷:线性表

今天开始刷洛谷&#xff0c;之前刷leetcode都是核心代码模式&#xff0c;现在突然让我用ACM模式&#xff0c;刚开始还是很不习惯的&#xff0c;但做了几道题好点了&#xff0c;只能说洛谷题的难度是比leetcode大的。 还有就是&#xff0c;STL牛逼&#xff01; 1.询问学号(vect…

具有权威性的工信部证书怎么考

工信部证书的考试流程如下&#xff1a; 选择正规报考机构&#xff1a;选择一家权威的培训机构或考试中心&#xff0c;确保其具有相应的资质和经验。 提交个人报考资料&#xff1a;根据考试机构的要求&#xff0c;提交相关的个人报考资料&#xff0c;如身份证、学历证明、工作…

【kubernetes】集群网络(一):基础篇

Flannel 1 路由表 & arp & fdb 1.1 路由表 任何网络设备都需要路由表&#xff0c;路由表用来决定&#xff0c;当收到数据包时&#xff0c;该向哪里进行转发。路由表项通常会包含以下几个字段&#xff1a; Destination&#xff1a;目的地Gateway&#xff1a;网关Mas…

【DDD领域驱动篇】如何理解领域驱动设计?

如何理解领域驱动设计? ✔️典型解析✔️扩展知识仓库✔️DDD带来的好处✔️DDD 的不足 ✔️典型解析 领域动设计(Domain-Driven Design&#xff0c;DDD)是一种软件开发方法论&#xff0c;将业务领域作为软件设计的核心&#xff0c;以便更好地满足业务需求。 DDD认为&#xff…

Hive和Spark生产集群搭建(spark on doris)

1.环境准备 1.1 版本选择 序号bigdata-001bigdata-002bigdata-003bigdata-004bigdata-005MySQL-8.0.31mysqlDataxDataxDataxDataxDataxDataxSpark-3.3.1SparkSparkSparkSparkSparkHive-3.1.3HiveHive 1.2 主要组件官网 hive官网&#xff1a; https://hive.apache.org/ hive…

数据结构学习 Leetcode322 零钱兑换

关键词&#xff1a;动态规划 完全背包 记忆化搜索 一个套路&#xff1a; 01背包&#xff1a;空间优化之后dp【target1】&#xff0c;遍历的时候要逆序遍历完全背包&#xff1a;空间优化之后dp【target1】&#xff0c;遍历的时候要正序遍历 题目&#xff1a; 方法一&#xff…

【Linux】Linux服务器ssh密钥登录

ssh密码登录 ssh root地址 #需要输入密码ssh密钥登录 Linux之间密钥登录 生成公私钥 #生成公钥私钥 ssh-keygen #默认目录&#xff0c;默认密码空ssh-copy-id #拷贝ID到目标服务器 ssh-copy-id -i id_rsa.pub root192.168.8.22 ssh-copy-id -i id_rsa.pub root192.168.8.33…

把这些软件测试经典面试题!全背下来,拿offer就像喝水一样!

1、什么是兼容性测试&#xff1f;兼容性测试侧重哪些方面&#xff1f; 兼容测试主要是检查软件在不同的硬件平台、软件平台上是否可以正常的运行&#xff0c;即是通常说的软件的可移植性。兼容的类型&#xff0c;如果细分的话&#xff0c;有平台的兼容&#xff0c;网络兼容&am…

C语言实验1:C程序的运行环境和运行C程序的方法

一、算法原理 这是学C语言的入门&#xff0c;并不需要很高深的知识&#xff0c;一个hello world 或者一个简单的加法即可 二、实验要求 了解所用的计算机系统的基本操作方法&#xff0c;学会独立使用该系统。 了解在该系统上如何编辑、编译、连接和运行一个C程序。 通过运…

无法连接虚拟机设备 ide1:0,因为主机上没有相应的设备。您要每次在开启此虚拟机时都尝试连接此虚拟设备吗?

Vmware报错&#xff1a; 报错原因&#xff1a; ide1:0一般是虚拟机的光驱&#xff0c;配置选项是“使用物理驱动器”&#xff0c;而宿主机可能没有安装光驱&#xff0c;故无法从驱动器上寻找 .ISO 系统文件。 解决方法: 右键点击对应的虚拟机&#xff0c;再点击“设置”按钮。…

Flask 拦截器

登录实现后&#xff0c;有很多页面还没有进行设置登录要求&#xff0c;即使没有登录也可以到页面中来&#xff0c;当页面多了以后&#xff0c;每个页面都进行设置又非常繁琐&#xff0c;所以这里用到了 Flask 拦截器 相关资料源码来自编程浪子的Flask点餐小程序系统 web/inte…

案例195:基于微信小程序的购物商城系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

Vue3-27-路由-路径参数的简单使用

什么是路径参数 在路由配置中&#xff0c;可以将【参数】放在【路由路径】中&#xff0c; 从而实现&#xff0c;同一个 路由&#xff0c;同一个组件&#xff0c;因路径参数不同&#xff0c;可以渲染出不同的内容。特点 &#xff1a; 1、当携带不同路径参数的路由相互跳转时&am…

【论文阅读】Realtime multi-person 2d pose estimation using part affinity fields

OpenPose&#xff1a;使用PAF的实时多人2D姿势估计。 code&#xff1a;GitHub - ZheC/Realtime_Multi-Person_Pose_Estimation: Code repo for realtime multi-person pose estimation in CVPR17 (Oral) paper&#xff1a;[1611.08050] Realtime Multi-Person 2D Pose Estima…

Bind for 0.0.0.0:2379 failed: port is already allocated

1、执行命令docker-compose -p docker-apisix up -d 报错 Error response from daemon: driver failed programming external connectivity on endpoint docker-apisix-etcd-1 (2a92a0cefff9194fcd1dad4bdeabf4201d9047ec2633eda455c6e46528668af4): Bind for 0.0.0.0:2379 fa…

NLP论文阅读记录 - 02 | 2022 自动文本摘要方法:综合回顾

文章目录 前言0、论文摘要一、Introduction1.1文本摘要的要求1.2主要研究贡献 二.ATS的分类2.1基于没有。输入文档的数量2.2 基于总结方法2.3 基于输出摘要性质&#xff1a;2.4 基于摘要语言2.4.1 基于摘要算法2.5 基于摘要内容2.6 基于摘要类型2.7 基于概括域2.8 基于加工水平…

Your password does not satisfy the current policy requirements

密码策略问题异常信息&#xff1a; ERROR 1819 (HY000): Your password does not satisfy the current policy requirements1、查看 mysql 初始的密码策略&#xff0c; 输入语句 “ SHOW VARIABLES LIKE validate_password%; ” 进行查看 2.首先需要设置密码的验证强度等级&am…