【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 属性序…

Javascript(运算符与表达式、控制语句)

一、运算符与表达式 - * / % ** - * / % ** -- 位运算、移位运算 ! > > < < ! ⭐️ && || ! ⭐️ ?? ?. ⭐️ ... ⭐️ 解构赋值 ⭐️ 1) 严格相等运算符&#xff0c;用作逻辑判等 1 1 // 返回 true 1 1 // 返回 true&#xf…

算法训练 day32 | 122.买卖股票的最佳时机II 55.跳跃游戏 45.跳跃游戏II

122.买卖股票的最佳时机II 题目链接:买卖股票的最佳时机 II 如果想到其实最终利润是可以分解的&#xff0c;那么本题就很容易了&#xff01;其实就是把利润分解为以每天为一个维度&#xff0c;我们可以只收集正利润的区间&#xff0c;获取正利润的区间就是股票买卖的区间&…

python 防止sql注入

python 防止sql注入 在Python中防止SQL注入有以下几种实现方法&#xff1a; 1、使用参数化查询&#xff08;Prepared Statements&#xff09;&#xff1a;这是最常用和推荐的方法。使用参数化查询可以将用户输入的数据与SQL语句进行分离&#xff0c;从而避免将用户输入内容作…

关于我用AI编写了一个聊天机器人……(8)

本次更新为1.3.4版本&#xff0c;增加了关机&#xff0c;重启&#xff0c;取消关机/重启的功能。 代码如下&#xff1a; #include <bits/stdc.h> #include <ctime> using namespace std; string userInput; class VirtualRobot { public:void chat() {cout <…

java安装与入门,MySQL安装与入门,Linux安装与入门,git安装与入门

一.java安装与入门 1,安装idea 2.快捷方式 3.Java入门基础 4.常见的API&#xff08;非常全面&#xff09; 链接&#xff1a;java后端__阿伟_的博客-CSDN博客 二.MySQL安装与入门 1.MySQL安装 2.MySQL入门 链接&#xff1a;数据库入门(MySQL&#xff0c;Redis )__阿伟_的…

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

网址&#xff1a;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…

Spring Cloud使用笔记

1.无需下载nacos&#xff0c;直接在项目中启动即可 git clone https://gitee.com/a594281060/base-nacos.git

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

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

【Spring连载】使用Spring Data访问Redis(四)----RedisTemplate

【Spring连载】使用Spring Data访问Redis&#xff08;四&#xff09;----RedisTemplate通过RedisTemplate处理对象Working with Objects through RedisTemplate 一、专注String的便利类二、Serializers 大多数用户可能使用RedisTemplate及其相应的包org.springframework.data.r…

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

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;详解SpringCloud微服务技术栈&#xff1a;深入ElasticSearch&#xff08;1&#xff09;——数据聚合 &#x1f4da;订阅专栏&…

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

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

java如何判断空值

1 前言 2 List的判空 3 String的判空 4 Optional 4.1 Optional对象的创建 4.2 使用场景 5 总结 1 前言 实际项目中我们会有很多地方需要判空校验&#xff0c;如果不做判空校验则可能产生NullPointerException异常。 针对异常的处理我们在上一篇有提及&#xff1a; 先来看一下…

网络安全运营专家的职业发展路径

网络安全运营分析师/专家是企业组织在网络威胁环境中建立强大防御能力的关键因素&#xff0c;承担着监控安全警报、分析潜在威胁以及响应突发性安全事件等职责。一名成功的网络安全运营分析师需要同时具备专业安全能力和软性职场技能&#xff0c;并且不断地学习提升&#xff0c…

Spring Boot第一天

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

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

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

Camunda中强大的监听服务

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