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

Vue常见的实现tab切换的两种方法

news 2026/4/11 8:57:07

目录

方法一：事件绑定+属性绑定

效果图

 完整代码

方法二：属性绑定+ 动态组件 component标签

效果图

完整代码 

方法一：事件绑定+属性绑定

效果图

 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>tab</title><style>*{margin: 0;padding: 0;}h2{width: 500px;height: 400px;background: #9fe4d9;text-align: center;line-height: 400px;display: none;}#app .kk{width: 500px;height: 50px;display: flex;justify-content: space-between;}#app{width: 500px;margin: 50px auto;}span{flex: 1;text-align: center;line-height: 50px;background: #ccc;}.on{background: pink;}#app .onn{display: block;}</style>
</head>
<body><div id="app"><div class="kk"><span :class =" n==1 && 'on'" @click.self="n=1">1</span><span :class =" n==2 && 'on'" @click.self="n=2">2</span><span :class =" n==3 && 'on'" @click.self="n=3">3</span><span :class =" n==4 && 'on'" @click.self="n=4">4</span><span :class =" n==5 && 'on'" @click.self="n=5">5</span></div><h2 :class =" n==1 && 'onn'">1</h2><h2 :class =" n==2 && 'onn'">2</h2><h2 :class =" n==3 && 'onn'">3</h2><h2 :class =" n==4 && 'onn'">4</h2><h2 :class =" n==5 && 'onn'">5</h2></div>
</body>
</html>
<script type="module">
import {createApp} from './js/vue.esm-browser.js';
createApp({data() {return {n:1}  },methods:{},
}).mount('#app')
</script>

方法二：属性绑定+ 动态组件 component标签

            该组件具有一个is属性，is属性的值 是 要渲染组件的名字，即为is属性的值是哪一个组件名，

            component 标签就会渲染哪一个组件

            缺点：component 可以动态渲染组件的内容，但是每一个切换，都会重新渲染组件内容，降低渲染效率

            使用keep-alive 标签(组件)，可以缓存曾经渲染过的组件，从而提高渲染效率

效果图

完整代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态组件</title><style>*{margin: 0;padding: 0;}.wp{width: 440px;height: 30px;margin: 20px auto;display: flex;background: #f0f0f0;}.wp span{flex: 1;height: 30px;text-align: center;line-height: 30px;cursor: pointer;}.wp span.on{background: pink;color: #fff;}h1{width: 440px;margin: 0 auto;}</style>
</head>
<body><div id="app"><div class="wp"><span :class="num==1&&'on'" @click="num=1">水浒传</span><span :class="num==2&&'on'" @click="num=2">红楼梦</span><span :class="num==3&&'on'" @click="num=3">西游记</span><span :class="num==4&&'on'" @click="num=4">三国演义</span></div><!-- 动态组件 使用标签 component 该组件具有一个is属性，is属性的值 是 要渲染组件的名字，即为is属性的值是哪一个组件名，component 标签就会渲染哪一个组件缺点：component 可以动态渲染组件的内容，但是每一个切换，都会重新渲染组件内容，降低渲染效率使用keep-alive 标签(组件)，可以缓存曾经渲染过的组件，从而提高渲染效率--><keep-alive><component :is="'comp'+num"></component></keep-alive></div>
</body>
</html>
<script type="module">import { createApp } from './js/vue.esm-browser.js';     let comp1={template:'<h1>水浒传</h1>'}let comp2={template:'<h1>红楼梦</h1>'}let comp3={template:`<h1>西游记</h1><p>{{n}}</p><button @click = "n++">点击++</button>`,data() {return {n:100,}},}let comp4={template:'<h1>三国演义</h1>'}let aa = {template:'<h1>金瓶梅</h1>'}createApp({data() {return {num:1,}},components:{comp1,comp2,comp3,comp4,aa}}).mount('#app')
</script>

相关文章：

Vue常见的实现tab切换的两种方法

目录 方法一&#xff1a;事件绑定属性绑定 效果图 完整代码 方法二&#xff1a;属性绑定 动态组件 component标签 效果图 完整代码 方法一&#xff1a;事件绑定属性绑定 效果图 完整代码 <!DOCTYPE html> <html lang"en"> <head><meta c…...

编程日记 2023/11/27 5:39:28

React16中打印事件对象取不到值的现象及其原因分析

React16中打印事件对象取不到值的现象及其原因分析 一、背景 在最近的开发过程中&#xff0c;遇到了一个看起来匪夷所思的问题❓&#xff1a; <Inputplaceholder"请输入"onChange{(e) > {console.log(e:, e)}}onKeyDown{handleKeyDown} />此时按理来说我…...

编程日记 2023/11/27 5:38:25

绝对干货-讲讲设计模式之创建型设计模式的本质

创建型模式&#xff08;Creational Patterns&#xff09;&#xff1a;创建型模式关注对象的创建机制&#xff0c;包括了如何实例化一个对象或者一组对象的方法。Java中的创建型模式有&#xff1a;单例模式&#xff08;Singleton Pattern&#xff09;、工厂模式&#xff08;简单…...

编程日记 2023/11/27 5:36:23

机器人规划算法——movebase导航框架源码分析

这里对MoveBase类的类成员进行了声明&#xff0c;以下为比较重要的几个类成员函数。 构造函数 MoveBase::MoveBase | 初始化Action 控制主体 MoveBase::executeCb收到目标&#xff0c;触发全局规划线程&#xff0c;循环执行局部规划 全局规划线程 void MoveBase::planThread |…...

编程日记 2023/11/27 5:35:23

Android：Google三方库之Firebase集成详细步骤（三）

Cloud Messaging 1、清单文件配置 a、&#xff08;可选&#xff09;一项扩展 FirebaseMessagingService 的服务。除了接收通知外&#xff0c;如果您还希望在后台应用中进行消息处理&#xff0c;则必须添加此服务。例如&#xff0c;您需要在前台应用中接收通知、接收数据载荷以及…...

编程日记 2023/11/27 5:34:21

2023年中国边缘计算网关现状及发展趋势分析[图]

边缘计算网关是一种可以在设备上运行本地计算、消息通信、数据缓存等功能的工业智能网关&#xff0c;可以在无需联网的情况下实现设备的本地联动以及数据处理分析。边缘计算网关是一种连接物联网设备和云端服务的关键技术&#xff0c;它可以在设备和云端之间建立一个安全、高效…...

编程日记 2023/11/27 5:33:21

LeetCode78.子集

这道题如果用暴力法几乎是不可能解出来的&#xff0c;因为情况太复杂了&#xff0c;但是一旦用上递归回溯就会轻松很多&#xff0c;先上代码&#xff1a; class Solution {List<List<Integer>> result new ArrayList<List<Integer>>();List<Integ…...

编程日记 2023/11/27 5:32:20

不是默认进入Linux|总是自动进入windows系统

问题描述 不是默认进入Linux系统无法主动出现boot引导自动进入windows系统 尝试无效 修复引导无效重装Grub无效重装系统无效 环境 Ubuntu 22.04 LST微星主板 解决方案 修改引导顺序&#xff1a; 开机狂按Del键&#xff0c;进入BIOS系统&#xff0c;左侧Settings 设置&…...

编程日记 2023/11/27 5:31:18

【面经八股】搜广推方向：常见面试题（二）

【面经&八股】搜广推方向：常见面试题（二） 文章目录 【面经&八股】搜广推方向：常见面试题（二）1. FTRL 是什么？(Follow The Regularized Leader)2. 梯度下降方法3. 推荐系统中常见的Embedding方法有哪些？4. Embedding与推荐系统有哪些结合5. FM 和 FFM6. FNN7. 深…...

编程日记 2023/11/27 5:30:17

机器学习与药物筛选的心得体会

机器学习在药物设计里面的应用可以说还是比较常见的&#xff0c;尤其是搞计算的都会或多或少的涉及到这块。比如国内做这块比较多的&#xff0c;浙江大学的侯廷军教授&#xff0c;北京化工大学的闫爱霞教授&#xff0c;华东理工大学的几个做模拟计算的老师&#xff0c;上海药物…...

编程日记 2023/11/27 5:28:14

初识数据结构

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 熬过了我们不想要的生活&#xf…...

编程日记 2023/11/27 5:27:12

【阿里云】图像识别 智能分类识别 增加网络控制功能点(三)

一、增加网络控制功能 实现需求TCP 心跳机制解决Soket异常断开问题 二、Linux内核提供了通过sysctl命令查看和配置TCP KeepAlive参数的方法。 查看当前系统的TCP KeepAlive参数修改TCP KeepAlive参数 三、C语言实现TCP KeepAlive功能 四、setsockopt用于设置套接字选项的系…...

编程日记 2023/11/27 5:26:12

LeetCode 统计美丽子字符串 II【质因子分解,前缀和,哈希表】困难

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…...

编程日记 2023/11/27 5:25:11

第一百八十一回 如何绘制阴影效果

文章目录 1. 概念介绍2. 使用方法2.1 SegmentedButton2.2 ButtonSegment 3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 1. 概念介绍 我们在本章回中介绍的SegmentedButton组件是一种分段式按钮&#xff0c;它把多个按钮连接成一组显示&#xff0c;组内再对不同的按钮进…...

编程日记 2023/11/27 5:23:08

Qt5.15.2静态编译 VS2017 with static OpenSSL

几年前编译过一次Qt静态库：VS2015编译Qt5.7.0生成支持XP的静态库，再次编译，毫无压力。 一.环境 系统：Windows 10 专业版 64位 编译器：visual studio 2017 第三方工具：perl，ruby和python python用最新的3.x.x版本也是可以的 这三个工具都需要添加到环境变量，安装时勾选…...

编程日记 2023/11/27 5:21:05

AIGC（生成式AI）试用 13 -- 数据时效性

数据时效性&#xff1f; 最新的数据&#xff0c;代表最新的状态&#xff0c;使用最新的数据也应该最有说服力。 学习需要时间&#xff0c;AIGC学习并接收最新数据的效果如何&#xff1f; 问题很简单&#xff0c;如何验证&#xff1f;这个需要找点更新快的对像进行验证。…...

编程日记 2023/11/27 5:20:04

Sass的嵌套CSS 规则详细教程

文章目录 前言父选择器的标识符&群组选择器的嵌套子组合选择器和同层组合选择器&#xff1a;>、和~嵌套属性后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;Sass和Less &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和…...

编程日记 2023/11/27 5:19:03

Spark---SparkCore（一）

一、术语与宽窄依赖 1、术语解释 1、Master(standalone):资源管理的主节点&#xff08;进程&#xff09; 2、Cluster Manager:在集群上获取资源的外部服务(例如&#xff1a;standalone,Mesos,Yarn) 3、Worker Node(standalone):资源管理的从节点(进程)或者说管理本机资源的…...

编程日记 2023/11/27 5:18:02

单链表原来是这样实现的！

文章目录 前言1. 链表的概念及结构1.1在链表里&#xff0c;每节“车厢”是什么样的呢&#xff1f;1.2为什么还需要指针变量来保存下⼀个节点的位置&#xff1f; 2. 单链表的实现1. 定义结构体(Seqlist)2. 打印函数(SLTPrint)小插曲&#xff0c;创建节点函数CreateNode3. 尾插函…...

编程日记 2023/11/27 5:17:00

excel一个单元格换行方法

要是在同一个单元格内输入文字输入不下的话&#xff0c;我们是可以进行同一个单元格换行设置的&#xff0c;而且换行的方法也是有很多种&#xff0c;下面我们就一起来看一下有哪些方法吧。 excel一个单元格换行方法&#xff1a; 方法一&#xff1a; 1、我们可以直接按下alte…...

编程日记 2023/11/27 5:14:59

Jupyter Notebook集成GLM-4.7-Flash：交互式AI开发指南

Jupyter Notebook集成GLM-4.7-Flash&#xff1a;交互式AI开发指南 1. 引言 你是不是经常在数据分析和AI开发中遇到这样的困扰&#xff1a;写代码、调试、查看结果需要在不同工具间来回切换&#xff0c;效率低下&#xff1f;或者想要一个强大的AI助手帮你写代码、分析数据&…...

编程新知 2026/4/11 7:18:02

DAMOYOLO-S在医疗影像分析中的初探：辅助定位X光片中的异物

DAMOYOLO-S在医疗影像分析中的初探&#xff1a;辅助定位X光片中的异物 最近和几位做医学影像的朋友聊天&#xff0c;他们提到一个挺头疼的问题&#xff1a;在大量的X光片里&#xff0c;尤其是急诊或者术后复查的片子&#xff0c;要快速、准确地找出那些不该出现的“小东西”&a…...

编程新知 2026/4/11 6:45:09

Guohua Diffusion提示词万能公式：主体+细节+风格，国风绘画成功率提升200%

Guohua Diffusion提示词万能公式&#xff1a;主体细节风格&#xff0c;国风绘画成功率提升200% 1. 国风绘画生成的核心挑战 国风绘画生成与传统AI绘画最大的区别在于其独特的审美体系和表现手法。许多用户在使用Guohua Diffusion时常常遇到以下问题&#xff1a; 生成的画面缺…...

编程新知 2026/4/11 6:04:25

解决Ubuntu浏览器认证校园网址无法打开的

清理 WebKit 缓存rm -rf ~/.cache/WebKit/ rm -rf ~/.cache/gnome-shell/portal-helper/重启网络管家sudo systemctl restart NetworkManager...

编程新知 2026/4/11 4:26:05

ros2中可视化topic数值命令

ros2 run plotjuggler plotjuggler...

编程新知 2026/4/10 23:48:23

Alibi分布式计算指南：如何用Ray加速大规模模型解释

Alibi分布式计算指南&#xff1a;如何用Ray加速大规模模型解释 【免费下载链接】alibi Algorithms for explaining machine learning models 项目地址: https://gitcode.com/gh_mirrors/al/alibi 在处理大规模机器学习模型解释时&#xff0c;单机计算往往面临性能瓶颈。…...

编程新知 2026/4/10 23:05:42

Quartus文件格式全解析：从Verilog到编程文件的完整指南

1. Quartus文件体系全景概览 第一次打开Quartus工程目录时&#xff0c;看到几十种不同后缀的文件是不是有点懵&#xff1f;这就像刚搬进新家面对一堆未拆封的纸箱&#xff0c;需要先搞清楚每个箱子里装的是什么。作为FPGA开发的"集装箱"&#xff0c;Quartus文件可以分…...

编程新知 2026/4/10 21:20:24

阿里开源大模型Qwen2.5-7B实测：离线推理+结构化输出，提升数据处理效率

阿里开源大模型Qwen2.5-7B实测&#xff1a;离线推理结构化输出&#xff0c;提升数据处理效率 1. 引言&#xff1a;为什么选择Qwen2.5-7B进行离线推理 在当今数据驱动的业务环境中&#xff0c;企业面临着海量数据处理的需求。传统的大模型在线推理方式虽然灵活&#xff0c;但在…...

编程新知 2026/4/10 19:47:52

护照阅读器在边检自助查验通道——“秒级通关”的核心

边检自助查验通道——“秒级通关”的核心应用概况&#xff1a;在出入境边检区域&#xff0c;自助通关通道已成为大型口岸的“标配”。旅客在闸机处自行扫描护照&#xff0c;系统自动完成信息读取、人证比对&#xff0c;实现快速通关。工作流程&#xff08;以石家庄边检站为例&a…...

编程新知 2026/4/10 18:48:31

.NET后端集成：开发Windows桌面端字幕制作工具

.NET后端集成&#xff1a;开发Windows桌面端字幕制作工具 1. 引言 做视频的朋友们&#xff0c;尤其是那些需要处理大量口播、课程或者访谈内容的&#xff0c;应该都体会过手动加字幕的“痛苦”。一句一句听&#xff0c;一帧一帧对&#xff0c;眼睛盯着波形图&#xff0c;手指…...

编程新知 2026/4/10 17:44:17