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

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

news 2026/2/9 8:21:16

目录

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

效果图

 完整代码

方法二：属性绑定+ 动态组件 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

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2026/2/8 4:37:01

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2026/2/8 20:42:48

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2026/1/15 4:25:16

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2026/2/1 5:38:25

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2026/1/31 8:25:07

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2026/2/7 17:45:38

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

编程新知 2026/2/4 17:33:27

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 &#xff0c;不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源&#xff08;最常用&#xff09; conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...

编程新知 2026/2/7 7:52:41

对象回调初步研究

_OBJECT_TYPE结构分析 在介绍什么是对象回调前&#xff0c;首先要熟悉下结构 以我们上篇线程回调介绍过的导出的PsProcessType 结构为例&#xff0c;用_OBJECT_TYPE这个结构来解析它&#xff0c;0x80处就是今天要介绍的回调链表&#xff0c;但是先不着急&#xff0c;先把目光…...

编程新知 2026/1/26 18:44:47

SOC-ESP32S3部分：30-I2S音频-麦克风扬声器驱动

飞书文档https://x509p6c8to.feishu.cn/wiki/SKZzwIRH3i7lsckUOlzcuJsdnVf I2S简介 I2S&#xff08;Inter-Integrated Circuit Sound&#xff09;是一种用于传输数字音频数据的通信协议&#xff0c;广泛应用于音频设备中。 ESP32-S3 包含 2 个 I2S 外设&#xff0c;通过配置…...

编程新知 2026/1/31 18:42:55