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

前端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.kler.cn/a/311842.html

相关文章:

  • Qt 编写插件plugin,支持接口定义信号
  • 「IDE」集成开发环境专栏目录大纲
  • vue3+vite搭建脚手架项目本地运行electron桌面应用
  • 微服务架构面试内容整理-监控与追踪-Zipkin
  • 三周精通FastAPI:40 部署应用程序或任何类型的 Web API 概念
  • thinkphp自定义命令行+宝塔面板Shell脚本实现定时任务
  • 【Verilog学习日常】—牛客网刷题—Verilog快速入门—VL24
  • 基于CNN的10种物体识别项目
  • Spark-ShuffleWriter-UnsafeShuffleWriter
  • react是什么?
  • 数据结构、STL
  • 私域直播平台带源码
  • FRIDA-JSAPI:Java使用
  • leetcode:字符串中的第一个唯一字符
  • YOLOv10轻量化快速涨点之改进AKConv
  • Linux:vim编辑技巧
  • 【STL】priority_queue 基础,应用与操作
  • C++ 头文件 .h和.hpp的介绍与区别
  • 深度学习常见面试题及答案(11~15)
  • [Linux]自定义shell详解
  • HTML/CSS/JS学习笔记 Day4(CSS--C1 选择器声明)
  • .dav视频文件及格式转换
  • HashMap高频面试知识点
  • 【Ubuntu】ubuntu如何使用ufw(Uncomplicated Firewall)管理防火墙?一文带你学会!
  • Ubuntu-24.04中Docker-Desktop无法启动
  • 怎么操作使http变成https访问?