【Vue】二、Vue 组件展示控制的优雅解决方案

         vue项目中展示的组件,我平常都是通过v-show进行展示控制,类似这样

        通常情况下,一个正常展示组件的流程,是通过前端用户点击触发函数,在函数中对data数据进行操作,从而展示不同的页面

showWork: false,
showOpusTable: false,

在方法中:

goToWork() {console.log("跳转到工作台");this.showOpusTable = false;this.showWork = true;
},

        一两个变量还好,变量多了,自然很麻烦,于是我采用了更为便捷的方法:将这些组件展示变量存储在一个对象中

showComponent: {opusTable: false,work: false,
},

         然后使用computed属性来简化代码

showOpusTable() {return this.showComponent.opusTable;
},
showWork() {return this.showComponent.work;
},

        再遍历showComponent对象的属性来设置它们的值为false,这个方法称之为closeAll,借助此方法便捷的控制组件展示变量

closeAll() {for (const key in this.showComponent) {if (Object.hasOwnProperty.call(this.showComponent, key)) {this.showComponent[key] = false;}}
},

        之后再函数中对组件展示,就简单的两行代码即可,第一行调用closeAll关闭所有组件,第二个打开想要展示的组件即可。

gotoIndex() {this.closeAll();this.showComponent.opusTable = true;
},

         仅为个人使用方法,实际开发中,应采用效能更高,更符合使用场景的方法,欢迎讨论。

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

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

相关文章

首次接触共享办公室,有哪些问题需要注意?

随着互联网和创业的发展,越来越多的企业和个人选择共享办公空间作为他们的办公场所。共享办公空间是一种提供灵活的办公模式和配套的设施和服务的空间,可以帮助企业和个人节省成本和空间,提高效率和创新,拓展人脉和资源。但是&…

【C++】STL之空间配置器(了解)

一、什么是空间配置器 空间配置器 ,顾名思义就是为各个容器高效的管理空间(空间的申请与回收)的,在默默地工作。虽然在常规使用 STL 时,可能用不到它,但站在学习研究的角度,学习它的实现原理对…

注册亚马逊店铺用动态IP可以吗?

注册亚马逊店铺可以用动态IP,只要是独立且干净的网线就没问题,亚马逊规则要求一个IP地址只能出现一个亚马逊店铺,若使用不当会导致关联账户。 固定ip可以给我们的账户带来更多的安全,要知道关联问题是亚马逊上的一个大问题&#…

PHP/原生类/Java/Python反序列化总结

PHP反序列化 #方法&属性-调用详解&变量数据详解 对象变量属性: public(公共的):在本类内部、外部类、子类都可以访问 protect(受保护的):只有本类或子类或父类中可以访问 private(私人的):只有本类内部可以使用 序列化数据显示: private 属性序…

python爬虫之豆瓣首页图片爬取

网址:https://movie.douban.com/ import requests from lxml import etree import re url https://movie.douban.com headers {User-Agent : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.5735.289 Safari/5…

如何快速知道app当前页面是哪一个Activity(2.0升级版)

点我跳转 如何快速知道app当前页面是哪一个Activity 1.0版本 这个版本是用adb 命令实现的,想看的可以看看,学习一下adb 命令。 今天做了一个非常简易的app来直接监控当前页面Activity,效果直接炸裂,效果图如下: 有需要…

详解SpringCloud微服务技术栈:深入ElasticSearch(2)——自动补全、拼音搜索

👨‍🎓作者简介:一位大四、研0学生,正在努力准备大四暑假的实习 🌌上期文章:详解SpringCloud微服务技术栈:深入ElasticSearch(1)——数据聚合 📚订阅专栏&…

Windows断开映射磁盘提示“此网络连接不存在”,并且该磁盘直在资源管理器中

1、打开注册表编辑器 快捷键winR 打开“运行”, 输入 regedit 2、 删除下列注册表中和无法移除的磁盘相关的选项 \HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\MountPoints2\ 3、打开“任务管理器”,重新启动“Windows资源…

Spring Boot第一天

SpringBoot概述 Spring Boot是Spring提供的一个子项目,用于快速构建Spring应用程序 传统方式构建Spring应用程序 导入依赖繁琐 项目配置繁琐 为了简化如此繁琐的配置流程,SpringBoot这一子项目提供了如下特性 SpringBoot特性 起步依赖 本质上就是一个…

代码随想录算法训练营第十六天 | 完全二叉树

目录 完全二叉树 LeetCode 222. 完全二叉树的节点个数 完全二叉树 作者:labuladong 如何求一棵完全二叉树的节点个数呢? // 输入一棵完全二叉树,返回节点总数 int countNodes(TreeNode root);如果是一个普通二叉树,显然只要向…

Camunda中强大的监听服务

文章目录 简介创建工程JavaDelegateTaskListenerExecutionListener部署发起流程CustomExecutionListener开始节点CustomExecutionListenerCustomJavaDelegateCustomExecutionListenerCustomTaskListener用户节点 ExpressionDelegate Expression流程图 简介 Camunda预览了很多接…

MTK8365安卓核心板_联发科MT8365(Genio 350)核心板规格参数

MTK8365安卓核心板是一款高性能的嵌入式处理器产品,基于联发科领先的SoC架构和先进的12纳米工艺。它集成了四核ARM Cortex-A53处理器,每个核心频率高达2.0 GHz,搭载强大的多标准视频加速器,支持高达1080p 60fps的视频解码。此外&a…

【MBtiles数据格式说明】GeoServer改造Springboot番外系列一

一、MBTiles数据格式 MBTiles格式是指由MapBox制定的一种将瓦片地图数据存储到SQLite数据库中并可快速使用、管理和分享的规范,是一种用于即时使用和高效传输的规范。MBTiles既可以用作栅格输入数据存储,也可以用作WMSGetMap输出格式。规范有1.0&#xf…

rp-bf:一款Windows下辅助进行ROP gadgets搜索的Rust库

关于rp-bf rp-bf是一款Windows下辅助进行ROP gadgets搜索的Rust库,该工具可以通过模拟Windows用户模式下的崩溃转储来爆破枚举ROP gadgets。 在很多系统安全测试场景中,研究人员成功劫持控制流后,通常需要将堆栈数据转移到他们所能够控制的…

第一批 Apple Vision Pro 开箱和佩戴体验新鲜出炉!!!

注: 本文转自微信公众号 BravoAI (专注AI资讯和技术分享), 原文网址:第一批 Apple Vision Pro 开箱和佩戴体验新鲜出炉!!!, 扫码关注公众号 编者按: 整个AR/VR行业都在等AVP, 期待它能带来ChatGPT般的冲击 AVP(Apple Vision Pro) 是苹果公司研发的第一款"空间计算 (Spa…

基础小白快速入门python------Python程序设计结构,循环

循环在计算机中,是一个非常重要的概念,是某一块儿代码的不断重复运行,是一种逻辑思维 在编程中的体现,运用数学思维加代码结合加数据,就构成了一个循环。 在Python中,循环主要分为三大类 for循环 while循…

Revit中使用依赖注入

依赖注入的技术已经很成熟,本文主要是说明一下Revit中的适用版本与介绍相关的开源项目。 版本问题 版本 目前的依赖注入包无法支持Revit 2020 以下的版本,原因是因为包中的依赖项与Revit本身的依赖项不一致导致的,所以说如果使用Revit DI…

力扣hot100 括号生成 递归回溯 超简洁版

Problem: 22. 括号生成 Code 使用 static 会被复用 class Solution {List<String> ans new ArrayList<>();public List<String> generateParenthesis(int n){dfs(n, n, "");return ans;}/*** param l 左括号待补个数* param r 右括号待补个数*…

nodejs+vue+ElementUi电商购物个性化商城推荐系统gqfe

电本电商个性化推荐系统是为了提高用户查阅信息的效率和管理人员管理信息的工作效率&#xff0c;可以快速存储大量数据&#xff0c;还有信息检索功能&#xff0c;这大大的满足了用户和管理员这二者的需求。操作简单易懂&#xff0c;合理分析各个模块的功能&#xff0c;尽可能优…

ansible 常用命令 基本说明 个人备忘

linux下设置一台机器的名称为ansible hostnamectl set-hostname ansible //设置一台机器的名称为master-01 hostnamectl set-hostname master-01 hostnamectl set-hostname master-02 hostnamectl set-hostname node01 hostnamectl set-hostname node02 hostnamectl set-…