quasar框架切换Tab页使用<keep-alive>缓存

写法1 : 使用quasar的q-tabs组件使用方法

//布局样式根据需求自己设置
<template><div class="all-Tabs"><q-tabs v-model="activeTabName"  @update:model-value="selectedChange"><q-tabv-for="(item, index) in cardArr":key="index":label="item.label":name="item.activeTabName"></q-tab></q-tabs><div class="bottom"><!-- 放置动态组件... --><!-- keep-alive缓存组件,这样的话,组件就不会被销毁,DOM就不会被重新渲染 --><keep-alive><component:is="activeTabName"></component></keep-alive></div>
</div>
</template>
<script>
import { ref, shallowRef, watch, nextTick, onMounted, inject,reactive ,computed,toRefs,getCurrentInstance,onUnmounted,watchEffect} from 'vue'
import hourlyQueryCom from './hourlyQueryCom'
import journalQueryCom from './journalQueryCom'
import historicalDataCom from './historicalDataCom'
import historicalDataMoreCom from './historicalDataMoreCom'
export default {name: "index",components:{hourlyQueryCom,journalQueryCom,historicalDataCom,historicalDataMoreCom},setup(){const state = reactive({activeTabName:'hourlyQueryCom',cardArr: [{label: "观测部查询",activeTabName: "hourlyQueryCom",},{label: "日纪要查询",activeTabName: "journalQueryCom",},{label: "历史数据单表查询",activeTabName: "historicalDataCom",},{label: "历史数据多表查询",activeTabName: "historicalDataMoreCom",},],})const selectedChange = (value)=>{state.activeTabName = value}return{selectedChange,...toRefs(state),}}
</script>

写法2 :手动创建tab切换效果

//自行设置样式
<template><div class="all-Tabs"><div class="top"><div class="crad":class="{ highLight: whichIndex == index }"v-for="(item, index) in cardArr":key="index"@click="whichIndex = index;activeTabName = item.activeTabName;">{{ item.label }}</div></div><div class="bottom"><!-- 放置动态组件... --><!-- keep-alive缓存组件,这样的话,组件就不会被销毁,DOM就不会被重新渲染 --><keep-alive><component :is="activeTabName"></component></keep-alive></div></div>
</template>
<script>
import { ref, shallowRef, watch, nextTick, onMounted, inject,reactive ,computed,toRefs,getCurrentInstance,onUnmounted,watchEffect} from 'vue'
import hourlyQueryCom from './hourlyQueryCom'
import journalQueryCom from './journalQueryCom'
import historicalDataCom from './historicalDataCom'
import historicalDataMoreCom from './historicalDataMoreCom'
export default {name: "index",components:{hourlyQueryCom,journalQueryCom,historicalDataCom,historicalDataMoreCom},setup(){const state = reactive({whichIndex:0,activeTabName:'hourlyQueryCom',cardArr: [{label: "观测部查询",activeTabName: "hourlyQueryCom",},{label: "日纪要查询",activeTabName: "journalQueryCom",},{label: "历史数据单表查询",activeTabName: "historicalDataCom",},{label: "历史数据多表查询",activeTabName: "historicalDataMoreCom",},],})return{...toRefs(state),}}
</script>
<style  scoped lang="scss">.highLight{border:1px solid red;///自行设置  高亮	}//自行设置样式.bottom{}
</style>

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

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

相关文章

Elasticsearch 索引数据多了,调优,部署方案

1&#xff1a;动态索引层面 基于 模板时间rollover api 滚动 创建索引&#xff0c;举例&#xff1a;设计阶段定义&#xff1a;blog 索引的模板格式为&#xff1a;blog_index_时间戳的形式&#xff0c;每天递增数据。这样做的好处&#xff1a;不至于数据量激增导致单个索引数据量…

sklearn混淆矩阵的计算和seaborn可视化

为了计算语义分割的指标miou&#xff0c;需要生成的中间过程就是混淆矩阵。 iou intersection / union 每个类别的平均iou就是mean iou。 使用sklearn自带的confusion_matrix能很容易生成混淆矩阵&#xff0c;可以进行混淆矩阵的可视化观察哪个类别分割的不好。 from skle…

【go从入门到精通】深入剖析反射

作者简介: 高科,先后在 IBM PlatformComputing从事网格计算,淘米网,网易从事游戏服务器开发,拥有丰富的C++,go等语言开发经验,mysql,mongo,redis等数据库,设计模式和网络库开发经验,对战棋类,回合制,moba类页游,手游有丰富的架构设计和开发经验。 (谢谢你…

OAuth2、JWT

文章目录 OAuth2JWT OAuth2 官网&#xff1a; https://oauth.net/2/ 在 RFC 6749 中说明 1、资源所有者 resource owner&#xff0c; 如 github 用户 2、客户端/第三方应用 client&#xff0c; 如 支持github 登录的 csdn 3、资源服务器 resource server&#xff0c; 如 4、授…

深入浅出MySQL-04-【常用函数】

前言 环境&#xff1a; Window11MySQL-8.0.35 1.字符串函数 最常用的一种函数。 注意&#xff1a;在 MySQL 中&#xff0c;字符串的下标&#xff08;或称为索引&#xff09;是从 1 开始的&#xff0c;而不是从 0 开始。 函数功能CONCAT(s1, s2, …, sn)连接s1, s2, …, s…

【高阶数据结构】B树 {B树的概念;B树的实现:节点设计,查找,插入,遍历,删除;B树的性能分析;B+树和B*树;B树的应用}

一、常见的搜索结构 以上结构适合用于数据量相对不是很大&#xff0c;能够一次性存放在内存中&#xff0c;进行数据查找的场景。如果数据量很大&#xff0c;比如有100G数据&#xff0c;无法一次放进内存中&#xff0c;那就只能放在磁盘上了&#xff0c;如果放在磁盘上&#xff…

如何查看连接的Linux服务器是ubuntu还是centos

测试环境 Ubuntu 22.04.4CentOS Linux release 7.9.2009 (Core) centos使用以下命令 cat /etc/centos-release结果 CentOS Linux release 7.9.2009 (Core)或者 cat /etc/issue结果 \S Kernel \r on an \mubuntu使用以下命令 cat /etc/issue结果 Ubuntu 22.04.4 LTS \n …

全局路线规划导读

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言一、全局路径探索的介绍二、基于定位的全局航线的录制方法扩展阅读可参考 三、曲线拟合的方法--Dubins曲线与Reeds-Shepp曲线…

Linux系统安全:从面临的攻击和风险到安全加固、安全维护策略(文末有福利)

1. Linux面临的攻击与风险 1.1. Linux系统架构 Linux系统架构解读&#xff1a; 用户之间隔离内核态与用户态之间隔离用户进程一般以低权限用户运行系统服务一般以特权服务运行用户态通过系统调用进入内核态内核对系统资源进行管理和分配 1.2. Linux系统常见安全威胁 1.2.1.…

Qt/C++音视频开发71-指定mjpeg/h264格式采集本地摄像头/存储文件到mp4/设备推流/采集推流

一、前言 用ffmpeg采集本地摄像头&#xff0c;如果不指定格式的话&#xff0c;默认小分辨率比如640x480使用rawvideo格式&#xff0c;大分辨率比如1280x720使用mjpeg格式&#xff0c;当然前提是这个摄像头设备要支持这些格式。目前市面上有一些厂家做的本地设备支持264格式&am…

目标检测——YOLOv7算法解读

论文&#xff1a;YOLOv7: Trainable bag-of-freebies sets new state-of-the-art for real-time object detectors (2022.7.6) 作者&#xff1a;Chien-Yao Wang, Alexey Bochkovskiy, Hong-Yuan Mark Liao 链接&#xff1a;https://arxiv.org/abs/2207.02696 代码&#xff1a;h…

C++_第八周做题总结

id:45 A.Equation(类与对象构造) 题目描述 建立一个类Equation&#xff0c;表达方程ax2bxc0。类中至少包含以下方法&#xff1a; 无参构造&#xff08;abc默认值为1.0、1.0、0&#xff09;与有参构造函数&#xff0c;用于初始化a、b、c的值&#xff1b; set方法&#xff0c;…

哈希封装unordered系列关联式容器

文章目录 补档HashTable迭代器基本框架具体实现 HashTable模板化具体实现 UnorderedSet封装具体实现 UnorderMap封装 补档 上一次我们在使用哈希函数时说&#xff0c;利用仿函数可以解决不知道哈希表内存的数据类型时对哈希函数也可以进行计算&#xff0c;但是当时只给了一个框…

Android判断应用是否在前台运行

Android判断应用是否在前台运行 /*** Android判断应用是否在前台运行* 0&#xff1a;异常&#xff1b;1&#xff1a;前台&#xff1b;2&#xff1a;后台&#xff1b;3&#xff1a;未运行&#xff1b;*/private int isFrontShow(Context context) {if (context null) {ret…

基于STM32 的机场安检闸机排队系统

项目&#xff1a;基于STM32 的机场安检闸机排队系统 应用场景&#xff1a;现实中可能涉及到人数限额排队的情况下使用&#xff0c;例如安检&#xff08;不能一次性通过太多人数&#xff1a;机场、高铁站、地铁等&#xff09;&#xff0c;电梯人数限额&#xff08;一个电梯内限…

【Java那些年系列-启航篇 03】JDK、JRE和JVM之间是什么关系?

作者名称&#xff1a;纸飞机-暖阳 作者简介&#xff1a;专注于Java和大数据领域&#xff0c;致力于探索技术的边界&#xff0c;分享前沿的实践和洞见 文章专栏&#xff1a;Java那些年专栏 专栏介绍&#xff1a;本专栏涵盖了 Java SE从基础语法到面向对象编程&#xff0c;从异常…

VS2019中配置C++ OpenCV 4.5.4完整指南

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的在读研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三…

STM32标准库ADC和DMA知识点总结

目录 前言 一、ADC模数转换器 &#xff08;1&#xff09;AD单通道 &#xff08;2&#xff09;AD多通道 二、DMA原理和应用 &#xff08;1&#xff09;DMA数据转运&#xff08;内存到内存&#xff09; &#xff08;2&#xff09;DMAAD多同道&#xff08;外设到内存&#x…

堆排序(升)

堆排序&#xff08;升&#xff09; 堆排序是一种基于二叉堆数据结构的排序算法。它的主要想是将待排序的序列构建成一个大顶堆&#xff08;或小顶&#xff09;&#xff0c;然后依次将堆顶元素与最后一个元素交换&#xff0c;并重新调整堆&#xff0c;使得剩余元素仍满足堆的性…

实习学习内容-Lua语法

Lua是一种轻量级的脚本语言&#xff0c;以其简单、灵活和高效的特点被广泛应用于嵌入式系统、游戏开发和服务器端编程中。Lua语言的设计目标是为了嵌入应用程序中&#xff0c;提供灵活的扩展和定制功能。下面&#xff0c;我将简要介绍Lua的基本语法和特点。 基本语法 变量和类…