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

VUE for循环 默认选中第一条数据

for循环渲染列表默认选中第一条数据 点击其他选项切换数据

<div><div class="Subtitle" style="padding: 5px 40px;">项目清单</div><div class="project-manifest"><div v-for="(item, index) in project" :key="index" class="project-list" :class="{ active: index === selectedProjectIndex }" @click="projectFn(item.id,item.name)"><span class="num">{{ index + 1 }}</span> <span class="project-name">{{ item.name }}</span></div></div>
</div>

主要代码: :class="{ active: index === selectedProjectIndex }"         以及  @click="projectFn(item.id)"                

active是样式名称  index是前面循环的index    selectedProjectIndex是接下来要定义的变量

点击方法传递的就是该条数据的id

const project = ref([{ id: '1', name: '湖北省公租房管理第三方评价项目', sonTask: "8", problem: '2' },{ id: '2', name: '河北省公租房管理第三方评价项目', sonTask: "7", problem: '1' },{ id: '3', name: '河南省省公租房管理第三方评价项目', sonTask: "6", problem: '3' },
])//默认为0 就会默认选中
const selectedProjectIndex = ref(0)function projectFn(id) {//根据传递回来的id判断是哪一条数据被选中selectedProjectIndex.value = project.value.findIndex(item => item.id === id);}

最后样式 (自己定义)

 .active {background: url(../../assets/visualization/background/activeBgc.png) no-repeat;background-size: 100% 100%;}

相关文章:

VUE for循环 默认选中第一条数据

for循环渲染列表默认选中第一条数据 点击其他选项切换数据 <div><div class"Subtitle" style"padding: 5px 40px;">项目清单</div><div class"project-manifest"><div v-for"(item, index) in project" :…...

小程序代码管理

“微信开发者工具”点击版本管理&#xff0c;然后点击代码管理会打开代码管理网页。 选择对应的项目组。 进来后点击创建项目。 输入git名称&#xff0c;然后选择命名空间&#xff0c;最后创建即可。 在刚才的“微信开发者工具”选择设置&#xff0c;然后添加远程。 输入名称&…...

RK3568-GPIO控制

RK3568-GPIO控制 1. Sysfs接口 实现逻辑 芯片的GPIO由芯片的GPIO控制器来管理&#xff0c;GPIO控制器封装在芯片内部&#xff0c;控制器的驱动芯片厂家已经写好了。RK3568有五组GPIO控制器&#xff0c;每组管理32个引脚&#xff0c;对应/dev下的gpiochip0~4的设备节点。 Lin…...

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书南京师范大学图书馆

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书南京师范大学图书馆...

【MySQL】什么是索引?如何选择索引类型?

什么是索引&#xff1f;索引原理索引的种类索引的优缺点感谢 &#x1f496; 在关系型数据库中&#xff0c;索引是一项重要的技术&#xff0c;它可以显著提高查询性能&#xff0c;加速数据检索过程。MySQL作为最流行的关系型数据库之一&#xff0c;也支持多种类型的索引 什么是索…...

第16章 服务安全控制

mini商城第16章 服务安全控制 一、课题 服务安全控制 二、回顾 1、MyBatis查询Apache Druid 2、热门商品处理 3、秒杀抢单操作 三、目标 1、Gateway限流 Gateway限流方案 基于令牌桶限流实现 2、Nginx限流 Nginx速率限流 Nginx并发量限流 3、Redis集群应用 Redis集群搭…...

面试问题总结(1)

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言&#xff0c;数据结构&#xff0c;Linux基础&#xff0c;ARM开发板&#xff0c;网络编程等领域UP&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff0…...

QUdpSocket Class

继承自 QAbstractSocket 类 QUdpSocket类提供UDP套接字。 UDP(用户数据报协议)是一种轻量级、不可靠、面向数据报、无连接的协议。它可以在可靠性不重要的情况下使用。QUdpSocket是QAbstractSocket的一个子类&#xff0c;它允许您发送和接收UDP数据报。 使用这个类最常见的方法…...

如何实现MongoDB数据的快速迁移?

作为一种Schema Free文档数据库&#xff0c;MongoDB因其灵活的数据模型&#xff0c;支撑业务快速迭代研发&#xff0c;广受开发者欢迎并被广泛使用。在企业使用MongoDB承载应用的过程中&#xff0c;会因为业务上云/跨云/下云/跨机房迁移/跨地域迁移、或数据库版本升级、数据库整…...

react中使用Modal.confirm数据不更新的问题解决

在使用Modal.confirm的时候今天发现了个疑惑的问题&#xff0c;为什么我明明从新set了数据而页面视图没有变化&#xff0c;查了一下官方文档找到了答案&#xff0c;解决了这个问题&#xff0c;特意在这里留下痕迹。 import { Button, Col, Form, Input, Modal, Radio, Row, Se…...

【vue】下拉、上拉刷新

我这里就把主要的下拉刷新的写一下&#xff0c;上拉是一样的道理&#xff0c;就不写了 <div class"talk_top" ref"listWrapper" id"listWrapper"><div class"loadingpic" v-loading"loading"></div><d…...

el-tree组件的锚点链接

el-tree部分&#xff1a; <el-tree:default-expand-all"true":data"anchorList":props"defaultProps"node-click"handleNodeClick"/> 组件内部部分&#xff1a; <div class"header" :id"content obj.id&q…...

汽车电气架构

文章目录 现阶段的汽车电气架构高压混合动力系统电子架构集成化&#xff08;E/E Architecture Integration&#xff09;车载以太网技术软件定义汽车 现阶段的汽车电气架构 当前最先进的汽车电气架构主要有以下几种&#xff1a; 48伏微混合系统&#xff08;48V Mild Hybrid Sys…...

Spring中添加打印请求头的拦截器

问题 因为最近这个项目没有调用链监控系统的支持&#xff0c;但是&#xff0c;本地PostMan调试的时候又需要请求头才能正常调试。 思路 喊ChatGPT实现一下能够打印所有请求头的拦截器&#xff0c;然后&#xff0c;集成到已有代码即可。 解决 RequestHeaderInterceptor.jav…...

LeetCode(力扣)216. 组合总和 IIIPython

LeetCode216. 组合总和 III 题目链接代码 题目链接 https://leetcode.cn/problems/combination-sum-iii/ 代码 class Solution:def combinationSum3(self, k: int, n: int) -> List[List[int]]:result[]self.backtracking(n, k, 0, 1, [], result)return resultdef back…...

无涯教程-JavaScript - IMLOG10函数

描述 IMLOG10函数以x yi或x yj文本格式返回复数的公共对数(以10为底)。可以从自然对数计算复数的公共对数,如下所示: $$\log_ {10}(x yi)(\log_ {10} e)\ln(x yi)$$ 语法 IMLOG10 (inumber)争论 Argument描述Required/OptionalInumberA complex number for which you …...

C++ 学习之深拷贝 和 浅拷贝

前言 在C中&#xff0c;浅拷贝和深拷贝是涉及对象复制的两种不同方式&#xff0c;它们之间的关键区别在于拷贝对象时是否复制对象所指向的数据。 正文 浅拷贝&#xff08;Shallow Copy&#xff09;&#xff1a; 浅拷贝只复制对象本身&#xff0c;而不复制对象所指向的数据。…...

Qt QtWidgets相关问题汇总

问&#xff1a;在Qt QWidget中设置WindowFlags为Qt::Window导致该Widget消失了&#xff0c;为什么&#xff1f; 答&#xff1a;WindowFlags设置为Qt::Window&#xff0c;表示该widget变为window类型&#xff0c;需要调用QWidget::show()方法。 问&#xff1a;Qt中WindowFlags…...

【ubuntu22.04 文件管理器nautilus配置默认终端为alacritty】

前言 ubuntu默认的终端不能通过设置里的默认应用程序配置nautilus是ubuntu自带的文件管理器&#xff0c;包管理器里面只有nautilus-extension-gnome-terminal而没有提供大多终端update-alternatives工具可以修改系统的默认终端(ctrl-alt-t)&#xff0c;但对nautilus文件管理器…...

信息化发展30

IT 治理的内涵 IT 治理作为组织上层管理的一个有机组成部分&#xff0c; 由组织治理层或高级管理层负责&#xff0c; 从组织全局的高度上对组织信息化与数字化转型做出制度安排&#xff0c; 体现了治理层和最高管理层对信息相关活动的关注&#xff1b;IT 治理强调数字目标与组…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...