当前位置: 首页 > news >正文

vue3项目中组件切换不起作用

以下这种方式写页面中组件切换,不起作用。

<component :is="steps[compIndex].comp" />

解决:使用shallowReactive或者shallowRef把对应的组件名称重新定义下。

<component :is="compNames[steps[compIndex].comp]" />
<el-button v-for="(item,index) in boxes" @click="compIndex = index">点击切换组件</el-button><script setup lang="ts">
import comp1 from './components/comp1.vue'
import comp2 from './components/comp2.vue'
const boxes = [{title:'标题1',comp:'comp1'},{title:'标题2',comp:'comp2'}]const compIndex = ref(0)
type compName = {[key:string]:any
}
const compNames = shallowReactive<compName>({comp1,comp2})
</script>

不清楚还有没有其它解决办法,暂时就这样吧!

相关文章:

vue3项目中组件切换不起作用

以下这种方式写页面中组件切换&#xff0c;不起作用。 <component :is"steps[compIndex].comp" />解决&#xff1a;使用shallowReactive或者shallowRef把对应的组件名称重新定义下。 <component :is"compNames[steps[compIndex].comp]" /> &…...

YOLOv11改进策略【损失函数篇】| Slide Loss,解决简单样本和困难样本之间的不平衡问题

一、本文介绍 本文记录的是改进YOLOv11的损失函数&#xff0c;将其替换成Slide Loss&#xff0c;并详细说明了优化原因&#xff0c;注意事项等。Slide Loss函数可以有效地解决样本不平衡问题&#xff0c;为困难样本赋予更高的权重&#xff0c;使模型在训练过程中更加关注困难样…...

动静态库(Linux)

文章目录 前言一、静态库二、动态库三、深入理解动态库总结 前言 我们之前用过c语言的库.Linux中默认的都是使用动态库&#xff0c;如果想要使用静态库&#xff0c;就必须加上-static选项。默认都是安装的动态库&#xff0c;系统中一般没有静态库&#xff0c;如果要使用&#…...

51单片机和ARM单片机的区别

在嵌入式系统设计与应用中&#xff0c;单片机作为核心控制单元&#xff0c;扮演着至关重要的角色。其中&#xff0c;51单片机和ARM单片机作为两种常见的单片机类型&#xff0c;各自具有独特的特点和优势。本文将从多个维度深入探讨这两种单片机的区别&#xff0c;以便读者更好地…...

[Day 81] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

區塊鏈在食品安全中的應用 前言 食品安全一直是全球關注的問題&#xff0c;隨著全球供應鏈的複雜性增加&#xff0c;追踪食品從生產到消費的過程變得愈發困難。區塊鏈技術以其去中心化、不可篡改的特性&#xff0c;為食品安全提供了可靠的解決方案。在這篇文章中&#xff0c;…...

flac格式怎么转mp3?关于flac转为MP3的方法介绍

flac格式怎么转mp3&#xff1f;MP3格式经过压缩&#xff0c;相较于flac文件&#xff0c;显著减小了文件体积。这一特点使得音乐的存储和传输更加便捷&#xff0c;尤其适合移动设备以及存储空间有限的场景。由于MP3文件体积较小&#xff0c;分享音乐变得非常简单&#xff0c;无论…...

【笔记】KaiOS 系统框架和应用结构(APP界面逻辑)

KaiOS系统框架 最早自下而上分成Gonk-Gecko-Gaia层,代码有同名的目录,现在已经不用这种称呼。 按照官网3.0的版本迭代介绍,2.5->3.0已经将系统更新成如下部分: 仅分为上层web应用和底层平台核心,通过WebAPIs连接上下层,这也是kaios系统升级变更较大的部分。 KaiOS P…...

java项目实现钉钉异常告警实时监控

最近有个小伙伴问我&#xff0c;我们的项目核心业务的地方总是有异常&#xff0c;虽然有打印日志&#xff0c;但不能立马通知我&#xff1b;所以今天我就教大家如何实现异常报警实时提醒 1.需要有钉钉 自己新建的企业用户 2.建一个群&#xff0c;需要有三人以上&#xff1b;…...

Spring Boot应用:电子商务平台开发

第2章 关键技术简介 2.1 Java技术 Java是一种非常常用的编程语言&#xff0c;在全球编程语言排行版上总是前三。在方兴未艾的计算机技术发展历程中&#xff0c;Java的身影无处不在&#xff0c;并且拥有旺盛的生命力。Java的跨平台能力十分强大&#xff0c;只需一次编译&#xf…...

怎么在Vue3项目中引入Vant组件库并使用?

文章目录 前言一、项目中使用步骤1.安装&#xff1a;2.样式的导入&#xff08;2种方法&#xff09;2.1 main.ts全局导入&#xff08;平常自己的项目用的这个全局&#xff09;2.2 按需引入组件样式 (简单介绍一下)1.安装插件2.配置插件 3.组件按需使用&#xff1a;App.vue 总结 …...

springboot中有哪些方式可以解决跨域问题

文章目录 什么是跨域解决方案CrossOrigin注解实现WebMvcConfigurer接口CorsFilter过滤器如何选择&#xff1f; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 Talk is cheap &#xff0…...

Temporal Dynamic Quantization for Diffusion Models阅读

文章目录 AbstractIntroductionBackgrounds and Related Works2.1 扩散模型2.2 量化2.3 量化感知训练和训练后量化 TemporalDynamic Quantization3.1 量化方法3.2 扩散模型量化的挑战3.3 TDQ模块的实现3.4 工程细节时间步的频率编码TDQ模块的初始化 Experimental SetupResults5…...

828华为云征文|华为云Flexus X实例性能实测:速度与稳定性的完美结合

828华为云征文&#xff5c;华为云Flexus X实例性能实测&#xff1a;速度与稳定性的完美结合 前言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 Flexus云服务器X实例特点1.3 Flexus云服务器X实例使用场景 二、实践环境介绍2.1 本次实践环境规划2.2 本次实践介绍 …...

【PyTorch】图像分割

图像分割是什么 Image Segmentation 将图像每一个像素分类 图像分割分类 超像素分割&#xff1a;少量超像素代替大量像素&#xff0c;常用于图像预处理语义分割&#xff1a;逐像素分类&#xff0c;无法区分个体实例分割&#xff1a;对个体目标进行分割全景分割&#xff1a;…...

如何快速建立自己的异地互联的远程视频监控系统,通过web浏览器可以直接查看公网上的监控视频(上)

目录 一、需求 二、方案 2.1、计划方案 2.2、实施准备 2.2.1所需配置的产品和服务 2.2.1.1云主机 &#xff08;1&#xff09;选择云平台 &#xff08;2&#xff09;配置云服务器 2.2.2.2视频监控平台软件 &#xff08;1&#xff09;视频监控平台软件 &#xff08;2&am…...

实验2思科网院项目2.7.2-packet-tracer---configure-single-area-ospfv2---实践练习

实践练习 2.7.2-packet-tracer---configure-single-area-ospfv2---实践练习physical-mode 实验拓扑 相关设备配置 实验目标: 第 1 部分&#xff1a;构建网络并配置设备的基本设置 第 2 部分&#xff1a;配置和验证单区域 OSPFv2 的基本部署 第 3 部分&#xff1a;优化和验…...

Nginx实战经验分享:从小白到专家的成长历程!

目录 一、Nginx概述1、Nginx简介&#xff08;1&#xff09;事件驱动模型&#xff08;2&#xff09;异步处理&#xff08;3&#xff09;模块化设计&#xff08;4&#xff09;高性能&#xff08;5&#xff09;反向代理&#xff08;6&#xff09;负载均衡&#xff08;7&#xff09…...

从画质设置看游戏引擎(其一)

前往我的博客&#xff0c;获取无广告&#xff0c;更好的阅读体验 1. 抗锯齿&#xff08;Anti-Aliasing&#xff09; 1.1 锯齿问题的起因 在三维模型的世界中&#xff0c;模型是连续的&#xff0c;但是屏幕像素是不连续&#xff0c;是离散的&#xff1b; 即当一个圆形显示在显…...

#git 问题failed to resolve head as a valid ref

问题如下&#xff1a; 解决方法&#xff1a; 1、运行 git fsck --full 可以查看具体error信息&#xff0c;一般都是head索引问题 2、.git\refs\heads\xxx&#xff08;当前分支&#xff09;txt编辑器打开显示乱码&#xff0c;而不是hash编码 3、在.git\logs\refs\heads\xxx&a…...

YOLOv11,地瓜RDK X5开发板,TROS端到端140FPS!

YOLOv11 Detect YOLOv11 Detect YOLO介绍性能数据 (简要) RDK X5 & RDK X5 Module 模型下载地址输入输出数据公版处理流程优化处理流程步骤参考 环境、项目准备导出为onnxPTQ方案量化转化使用hb_perf命令对bin模型进行可视化, hrt_model_exec命令检查bin模型的输入输出情况…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...