前端vue-关于标签切换的实现

 首先是循环,使用v-for=“(item,index)  in list”   :key=“item.id”

然后当点击哪个的时候再切换,使用v-bind:class="  "或者是:class="  ",如果都是用active的话,那么每一个标签都是被选中的状态,但是我们需要的是点中哪个再选中哪个,所以我们在后面加上一个条件,active:index===current,current在下面的data中需要先定义一下。

要想实现切换功能,我们给标签ui里面的li一个点击事件,@click=“current=index”。实现current变化,而不是控制台手动加减。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Android IME输入法启动显示隐藏流程梳理

阅读Android AOSP 12版本代码,对输入法IME整体框架模块进行学习梳理,内容包含输入法框架三部分IMM、IMMS、IMS的启动流程、点击弹出流程、显示/隐藏流程,以及常见问题和调试技巧。 1. IME整体框架​​​​​​​ IME整体分为三个部分&#xf…

Log4j2—漏洞分析(CVE-2021-44228)

文章目录 Log4j2漏洞原理漏洞根因调用链源码分析调用链总结 漏洞复现dnsrmi Log4j2漏洞原理 前排提醒:本篇文章基于我另外一篇总结的JNDI注入后写的,建议先看该文章进行简单了解JNDI注入: https://blog.csdn.net/weixin_60521036/article/de…

茴香豆:企业级知识问答工具实践闯关任务

基础任务 在 InternStudio 中利用 Internlm2-7b 搭建标准版茴香豆知识助手,并使用 Gradio 界面完成 2 轮问答(问题不可与教程重复,作业截图需包括 gradio 界面问题和茴香豆回答)。知识库可根据根据自己工作、学习或感兴趣的内容调…

50页PPT麦肯锡精益运营转型五步法

读者朋友大家好,最近有会员朋友咨询晓雯,需要《 50页PPT麦肯锡精益运营转型五步法》资料,欢迎大家下载学习。 知识星球已上传的资料链接: 企业架构 企业架构 (EA) 设计咨询项目-企业架构治理(EAM)现状诊断 105页PPTHW企业架构设…

unity将多层嵌套的结构体与json字符串相互转化

定义多个结构体,将结构体内容输入到最终的JObject中,然后将其转为字符串打印出来,即可。 代码内容如下: using Newtonsoft.Json; using Newtonsoft.Json.Linq; using UnityEngine;public class Test : MonoBehaviour {private Ap…

【开源大模型生态9】百度的文心大模型

这张图展示了百度千帆大模型平台的功能架构及其与BML-AI开发平台和百度百舸AI异构计算平台的关系。以下是各个模块的解释: 模型广场: 通用大模型:提供基础的自然语言处理能力。行业大模型:针对不同行业的定制化模型。大模型工具链…

android10 系统定制:增加应用使用数据埋点,应用使用时长统计

需求意在统计应用的使用时长和开始结束时间,最终生成一个文件可以直观看出什么时候进入了哪个应用、什么时候退出,如图: 每行记录了应用的进入或退出,以逗号分割。分别记录了事件开始时间,应用包名,进入或…

51单片机——直流电机驱动

1、直流电机介绍 直流电机是一种将电能转换为机械能的装置。一般的直流电机有两个电极,当电极正接时,电机正转,当电极反接时,电机反转。 直流电机主要由永磁体(定子)、线圈(转子)和…

YoloV10改进策略:BackBone改进|Next-ViT主干赋能下的革命性改进

摘要 Next-ViT(下一代视觉Transformer)是专为解决传统ViT模型在工业部署中遇到的推理速度慢、计算复杂度高等问题而设计的。它巧妙地结合了高效的Next Convolution Block(NCB)和Next Transformer Block(NTB),通过创新的混合策略(NHS)堆叠这些模块,从而在各种视觉任务…

驱动---动态模块编译

动态模块编译 ctags 用法 创建文件 ------- ctags -R 一定要在顶层目录下 1. ctags –R * 2. vi –t tag (请把tag替换为您欲查找的变量或函数名) 3. Ctrl ] (跳转到要找的目标) 4. Ctrl T (回跳) 5. set tag/p…

计算机的错误计算(九十八)

摘要 探讨 的计算精度问题。 由计算机的错误计算(九十六)知,IEEE 754-2019标准中含有 运算。 另外,似乎没有语言直接编程实现内置了该运算。 例1. 已知 x-0.9999999999321 . 计算 不妨用Java编程计算: import…

【linux】基础IO(上)

1. 共识原理 文件 内容 属性文件分为 打开的文件 没打开的文件打开的文件 : 是进程打开的 ----- 本质是要研究文件和进程的关系没打开的文件 : 没打开的文件储存在磁盘上,由于没打开的文件很多,所以需要分门别类的防止好&…

【Linux实用教程】-03-用户权限命令

点个关注吧 🌴 3.1 Linux 的用户和组 🌾3.1.1 用户的管理 添加用户 useradd 添加一个用户useradd test 添加 test 用户useradd test -d /home/t1 指定用户 home 目录 注意: 用户操作需要使用管理员权限操作,可以先使用…

8583 顺序栈的基本操作

### 思路 1. **初始化栈**:分配初始大小为 STACK_INIT_SIZE 的内存空间,并将 base 和 top 指针指向该空间的起始位置。 2. **入栈**:检查栈是否已满,如果已满则扩展栈的存储空间。将新元素插入栈顶,并更新 top 指针。 …

用pod部署prometheus

用pod部署prometheus node_exporter 节点数据收集器 daemonset ————> 保证每个节点都有一个收集器 prometheus————>监控主程序 grafana————>图形化 altermanager————>告警模块 [rootmaster01 ~]# kubectl create ns monitor-sa namespace/moni…

【天怡AI-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 1. 暴力破解密码,造成用户信息泄露 2. 短信盗刷的安全问题,影响业务及导致用户投诉 3. 带来经济损失,尤其是后付费客户,风险巨大,造…

使用SpringCloud构建可伸缩的微服务架构

Spring Cloud是一个用于构建分布式系统的开源框架。它基于Spring Boot构建,并提供了一系列的工具和组件,用于简化开发分布式系统的难度。Spring Cloud可以帮助开发人员快速构建可伸缩的微服务架构。 要使用Spring Cloud构建可伸缩的微服务架构&#xff0…

外国药品位置检测系统源码分享

外国药品位置检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer…

office2016 增强版 KMS

第一步: 用管理员权限登陆:Windows PowerShell (安装最新的 PowerShell,了解新功能和改进!https://aka.ms/PSWindows) 第二步: C:\Windows\system32> cd C:\Program Files\Microsoft Off…

OpenCv(一)

计算机视觉和机器视觉的区别 计算机视觉(Computer Vision)和机器视觉(Machine Vision)是两个密切相关但又有区别的领域。两者在应用、技术和目标上都有所不同。 **计算机视觉:**主要是研究如何使计算机能够理解和处理…