vue前端开发自学基础,动态切换组件的显示

vue前端开发自学基础,动态切换组件的显示!这个是需要借助于,一个官方提供的标签,名字叫【Component】-[代码demo:<component :is="ComponetShow"></component>]。

下面看看代码详情。

<template><h3>动态切换组件的显示</h3><!-- <ComA></ComA> --><component :is="ComponetShow"></component><button @click="changeShow">切换组件显示</button>
</template>
<script>
import ComA from './components/ComA.vue';
import ComB from './components/ComB.vue';export default{data(){return{ComponetShow:"ComA"}},components:{ComA,ComB},methods:{changeShow(){this.ComponetShow = this.ComponetShow == "ComA" ? "ComB":"ComA"}}}
</script>

以上是在app.vue里面写的,一个按钮,绑定点击事件,切换组件A,和组件B的显示。里面很明显,是调用了一个官方提供的标签啊。它有一个属性叫【is】。这个可以绑定一个动态值。

然后用函数就可以随意的更改这个动态值。默认情况下,我们给他赋值了。是组件A的调用。

如图,点击切换组件显示按钮后,从组件A,变成了组件B。

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

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

相关文章

独孤思维:程前其实不该道歉

最近沸沸扬扬的程前事件&#xff0c;说一个不同的视角观点。 程在三个old money面前&#xff0c;表现出肚里没货&#xff0c;不懂礼貌。 甚至还对三个老一辈进行人身攻击。 事件持续发酵&#xff0c;程顶不住压力&#xff0c;诚恳道歉&#xff0c;却被网络群嘲。 程彻底丧失…

opencv多张图片实现全景拼接

最近camera项目需要用到全景拼接&#xff0c;故此查阅大量资料&#xff0c;终于将此功能应用在实际项目上&#xff0c;下面总结一下此过程中遇到的一些问题及解决方式&#xff0c;同时也会将源码附在结尾处&#xff0c;供大家参考&#xff0c;本文采用的opencv版本为3.4.12。 首…

Qt/QML编程学习之心得:小键盘keyboard(36)

小键盘对于qml应用是经常用到的,在qml里面,就如一个fileDialog也要自己画一样,小键盘keyboard也是要自己画的,对于相应的每个按键的clicked都要一一实现的。 这里有一个示例: 代码如下: import QtQuick 2.5 import QtQuick.Controls 1.4 import QtQuick.Window 2.0 im…

Jerry每次能向前或向后走n*n步(始终不能超过初始位置1e5),q(q <= 1e5)次询问,求向前走d最少要几次

题目 思路&#xff1a;因为有走的过程不能超初始位置1e5的限制&#xff0c;所以不能直接用奇数最多两次&#xff0c;4的倍数最多两次的结论。spfa&#xff0c;平方数的dis为1&#xff0c;然后推出其他数的dis #include<bits/stdc.h> using namespace std; #define int …

Python 与批处理:数据处理、系统管理和任务调度

批处理学习 大数据篇 &#xff5c; 大数据实操 三剑客之一的批处理 目录 批处理的概念使用场景框架选择选型如何选docker 安装 hivePython 操作 hivedocker 安装 sparkpyspark操作 dataframe如果使用 JAVA 原生的&#xff0c;而不用 spark会有什么区别 批处理的概念 批处理…

文件夹名称大小写转换的方法:提高文件管理效率的关键

在计算机的文件管理中&#xff0c;文件夹名称的大小写是经常被忽视的一个细节。这个看似微不足道的细节&#xff0c;却可能影响到文件管理效率和查找速度。下面一起来看云炫文件管理器如何批量修改文件夹名称大小写转换的方法&#xff0c;提高文件管理效率。 文件夹名称字母大…

使用swift创建第一个ios程序

一、安装xcode 先到app store中下载一个Xcode app 二、创建项目 1、项目设定 创建ios app 2、工程结构 三、修改代码实现按键联动 四、运行测试

S1-08 流和消息缓冲区

流缓冲区 流缓冲区一般用在不同设备或者不同进程间的通讯&#xff0c;为了提高数据处理效率和性能&#xff0c;设置的一定大小的缓冲区&#xff0c;流缓冲区可以用来存储程序中需要处理的数据、对象、报文等信息&#xff0c;使程序对可以对这些信息进行预处理、排序、过滤、拆…

2024.1.14力扣每日一题——删除排序链表中的重复元素

2024.1.14 题目来源我的题解方法一 双指针&#xff08;快慢指针&#xff09; 题目来源 力扣每日一题&#xff1b;题序&#xff1a;83 我的题解 方法一 双指针&#xff08;快慢指针&#xff09; 因为题目中的链表已经是升序排列&#xff0c;因此使用两个指针&#xff0c;分别…

华为常用的命令——display,记得点赞收藏!

华为设备提供了多条display命令用于查看硬件部件、接口及软件的状态信息。通常这些状态信息可以为用户故障处理提供定位思路。 常用的故障信息搜集的命令如下&#xff1a; 路由器常用维护命令表 交换机常用的故障信息搜集 关注 工 仲 好&#xff1a;IT运维大本营&#xff0c;获…

海外媒体宣发:新闻媒体发稿引爆社交媒体的7个诀窍-华媒舍

社交媒体的崛起已经改变了新闻媒体的传播方式。从Facebook到Twitter&#xff0c;从Instagram到LinkedIn&#xff0c;社交媒体平台为新闻媒体提供了一个巨大且潜力无限的受众群体。要在这个竞争激烈的环境中引爆社交媒体&#xff0c;需要一些技巧和诀窍。在本篇文章中&#xff0…

信息质量要求

目录 \quad 会计信息质量要求 会计核算的信息质量要求是对会计核算提供信息的基本要求,是处理具体会计业务的基本依据&#xff0c;是在会计核算前提条件制约下进行会计核算的标准和质量要求。 \quad \quad 可靠性 也就是真实性, 要求会计记录以实际凭证为依据如实反映财务状况和…

Ventoy:打造你的万能启动 U 盘 | 开源日报 No.146

ventoy/Ventoy Stars: 54.3k License: GPL-3.0 Ventoy 是一个开源工具&#xff0c;用于创建支持 ISO/WIM/IMG/VHD(x)/EFI 文件的可启动 USB 驱动器。其主要功能包括将镜像文件复制到 USB 驱动器并进行引导、一次性复制多个镜像文件并提供引导菜单选择以及在本地磁盘中浏览和引…

切分大文件sql为小份

数据库太大了&#xff0c;整个备份导入出问题或者慢&#xff0c;需要将整个库按照表分割&#xff08;一个表一个sql文件&#xff09; 环境 win10 工具&#xff1a;python3.7pycharm 要分割的文件大小&#xff1a;6G&#xff0c;sql文件import redbname with open(best**.sql,…

爬取目标网站的域名和子域名【网站子域扫描工具01】

使用 Python 的 requests 库发送 HTTP 请求&#xff0c;并使用 Beautiful Soup或者正则表达式来解析响应&#xff0c;从中提取出域名和子域名信息。 1.简单示例&#xff08;Beautiful Soup&#xff09; 这是一个简单的示例代码&#xff0c;演示如何使用 requests 和 Beautiful…

【基础数据结构】字符串

一、字符串输入 1.scanf("%s",str);分隔符为空格、制表符、回车 2.fgets(str,10,stdin);10为字符串char str[10]长度&#xff0c;可以读取空格字符的字符串&#xff0c;10代表最大读取长度&#xff0c;最多读取9个字符&#xff0c;这个函数自动在读取到换行符停止&…

【Java万花筒】Java安全卫士:从密码学到Web应用攻击

Java安全锦囊&#xff1a;从Web应用攻击到加密算法&#xff0c;助你建立强固的开发堡垒 前言 在当今数字化时代&#xff0c;安全性至关重要&#xff0c;特别是对于Java开发者而言。本文将深入探讨Java安全与加密领域的关键库和技术&#xff0c;包括Bouncy Castle、Jasypt、Ke…

网络协议与攻击模拟_05TCP协议

一、传输层知识回顾 &#xff11;、传输层的功能 定义应用层协议数据报文的端口号&#xff0c;流量控制对原始数据进行分段处理 &#xff12;、传输层提供的服务 传输连接服务数据传输服务、流量控制、差错控制、序列控制 &#xff13;、传输层的协议 面向连接的传输协议…

Qt6入门教程 5:添加资源和应用程序图标

目录 一.Qt资源系统&#xff08;Qt Resource System&#xff09; 1.Resource Collection Files&#xff08;.qrc&#xff09; 2.External Binary Resources 3.Compiled-In Resources 4.Resource Compiler (rcc) 5.在程序中使用资源 二.添加.qrc文件 1.添加.qrc 2.编辑…

AI剪辑助手:轻松剪辑专注创意,视频批量AI智剪的方法

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;在许多领域都展现出了强大的能力。在视频剪辑领域&#xff0c;AI剪辑助手的出现&#xff0c;给内容创作者带来了前所未有的便利。它不仅能快速、高效地完成视频剪辑工作&#xff0c;还能释放创造力。今天一起…