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

news2024/11/13 9:36:04

 首先是循环,使用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.coloradmin.cn/o/2148578.html

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

相关文章

[C高手编程] C语言宏、内置宏与预处理:深入理解与应用

💖💖⚡️⚡️专栏:C高手编程-面试宝典/技术手册/高手进阶⚡️⚡️💖💖 「C高手编程」专栏融合了作者十多年的C语言开发经验,汇集了从基础到进阶的关键知识点,是不可多得的知识宝典。如果你是即将…

TypeScript异常处理

1.异常的概念 程序运行中意外发生的情况就成为异常 例子: //除法运算function chu(num1:number,num2:number){if(num20){//throw 抛出异常throw new Error(除数不能为零)}let num:numbernum1/num2console.log(num) }//程序出现异常后会停止运行// 捕获异常try{ /…

《黑神话悟空》开发框架与战斗系统解析

本文主要围绕《黑神话悟空》的开发框架与战斗系统解析展开 主要内容 《黑神话悟空》采用的技术栈 《黑神话悟空》战斗系统的实现方式 四种攻击模式 连招系统的创建 如何实现高扩展性的战斗系统 包括角色属性系统、技能配置文件和逻辑节点的抽象等关键技术点 版权声明 本…

【他山之石】Humanize AI 简介

Humanize AI 简介 Humanize AI 官方首页截图 文章目录 Humanize AI 简介1 Humanize AI 是什么2 Humanize AI 能做什么3 Humanize AI 怎么用4 Humanize AI 怎么收费5 结论 1 Humanize AI 是什么 数字时代的当下,AI 人工智能已成为内容创作不可或缺的一部分。从生成文…

poi-tl的详细教程(动态表格、单元格合并)

前提了解poi-tl 链接: springboot整合poi-tl 创建word模板 实现效果 代码实现 ServerTableData import com.deepoove.poi.data.RowRenderData;import java.util.List;public class ServerTableData {/*** 携带表格中真实数据*/private List<RowRenderData> serverDat…

【Python常用模块】_PyMySQL模块详解

课 程 推 荐我 的 个 人 主 页:👉👉 失心疯的个人主页 👈👈入 门 教 程 推 荐 :👉👉 Python零基础入门教程合集 👈👈虚 拟 环 境 搭 建 :👉👉 Python项目虚拟环境(超详细讲解) 👈👈PyQt5 系 列 教 程:👉👉 Python GUI(PyQt5)教程合集 👈👈…

window.open()地址栏隐藏问题解决方案

问题 使用window.open打开一个页面时&#xff0c;想要隐藏地址栏&#xff0c;但是无效。 window.open (test.html,newwindow,height100,width400,top0,left0,toolbarno,menubarno,scrollbarsno, resizableno,locationno, statusno)由于浏览器区别和安全问题&#xff0c;浏览器…

最新动态一致的文生视频大模型FancyVideo部署

FancyVideo是一个由360AI团队和中山大学联合开发并开源的视频生成模型。 FancyVideo的创新之处在于它能够实现帧特定的文本指导&#xff0c;使得生成的视频既动态又具有一致性。 FancyVideo模型通过精心设计的跨帧文本引导模块&#xff08;Cross-frame Textual Guidance Modu…

数据结构里的栈和队列

栈的笑话 程序员A对程序员B说&#xff1a;“你知道为什么程序员喜欢栈吗&#xff1f;” 程序员B疑惑地问&#xff1a;“为什么&#xff1f;” 程序员A回答&#xff1a;“因为它没有bug&#xff08;bug的谐音在英语中也是‘虫子’的意思&#xff0c;而栈的英文是stack&#x…

Elasticsearch:一次生产集群 ES Watcher 失效的深度排查与分析 - 全过程剖析与解决方案

作者&#xff1a;尚雷&#xff0c;TechTalk 技术交流社区创办者 一次生产集群 ES Watcher 失效的深度排查与分析 全过程剖析与解决方案​​ 一、Elasticsearch Watcher 介绍 1.1 Watcher 概念概述 Watcher 是 Elasticsearch 提供的一项监控和告警服务&#xff0c;允许用户定义…

Mybatis 快速入门(maven)

文章目录 需求建表新建了数据库但是navicat界面没有显示 新建maven项目 注意导入依赖 总结 黑马学习笔记 需求 建表 注意&#xff1a;设置字符集 减少出错 drop database mybatis; create database mybatis charset utf8; use mybatis;drop table if exists tb_user;create…

【IDEA】自定义注解

1.给Java类加上注解 包含一个代码片段&#xff0c;可以在 #parse 指令的帮助下将其包含在 文件模板&#xff08;Templates 标签页&#xff09;中。 此内置模板是可编辑的。 除了静态文本、代码和注释外&#xff0c;您还可以使用预定义变量&#xff0c;这些变量随后将像宏一样被…

Android 如何实现搜索功能:本地搜索?数据模型如何设计?数据如何展示和保存?

目录 效果图为什么需要搜索功能如何设计搜索本地的功能&#xff0c;如何维护呢&#xff1f;总结 一、效果图 二、为什么需要搜索功能 找一个选项&#xff0c;需要花非常多的时间&#xff0c;并且每次都需要指导客户在哪里&#xff0c;现在只要让他们搜索一下就可以。这也是模…

react hooks--useMemo

概述 相当于计算属性!!! useMemo实际的目的也是为了进行性能的优化。 ◼ 如何进行性能的优化呢&#xff1f;  useMemo返回的也是一个 memoized&#xff08;记忆的&#xff09; 值&#xff1b;  在依赖不变的情况下&#xff0c;多次定义的时候&#xff0c;返回的值是相同…

HarmonyOS Next开发----使用XComponent自定义绘制

XComponent组件作为一种绘制组件&#xff0c;通常用于满足用户复杂的自定义绘制需求&#xff0c;其主要有两种类型"surface和component。对于surface类型可以将相关数据传入XComponent单独拥有的NativeWindow来渲染画面。 由于上层UI是采用arkTS开发&#xff0c;那么想要…

Nexpose 6.6.269 发布下载,新增功能概览

Nexpose 6.6.269 for Linux & Windows - 漏洞扫描 Rapid7 Vulnerability Management, release Sep 11, 2024 请访问原文链接&#xff1a;https://sysin.org/blog/nexpose-6/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.or…

【Python爬虫系列】_024.MySQL数据库

课 程 推 荐我 的 个 人 主 页:👉👉 失心疯的个人主页 👈👈入 门 教 程 推 荐 :👉👉 Python零基础入门教程合集 👈👈虚 拟 环 境 搭 建 :👉👉 Python项目虚拟环境(超详细讲解) 👈👈PyQt5 系 列 教 程:👉👉 Python GUI(PyQt5)教程合集 👈👈

六、JSON

文章目录 1. 什么是JSON1.1 JSON 在 JavaScript 中的使用1.1.1 json 的定义1.1.2 json 的访问1.1.3 json 的两个常用方法 1.2、JSON 在 java 中的使用1.2.1、javaBean 和 json 的互转1.2.2、List 和 json 的互转1.2.3、map 和 json 的互转 1. 什么是JSON 1.1 JSON 在 JavaScrip…

8.1差分边缘检测

基本概念 差分边缘检测是一种图像处理技术&#xff0c;用于检测图像中的边缘。边缘是指图像中灰度值发生显著变化的区域。差分边缘检测通常通过计算图像的梯度来实现&#xff0c;梯度反映了灰度值的变化率。在OpenCV中&#xff0c;可以使用不同的算子来检测不同方向的边缘&…

PDP 和 ICE 图的终极指南

部分依赖图和单独条件期望图背后的直觉、数学和代码(R 和 Python) PDP 和 ICE 图都可以帮助我们了解我们的模型如何做出预测。 使用个人显示面板我们可以将模型特征和目标变量之间的关系可视化。它们可以告诉我们某种关系是线性的、非线性的还是没有关系。 同样,当特征之间…