vue 给循环列表的选中项加样式

news2024/9/19 9:14:08

在Vue 3中,给循环列表中的选中项加样式可以通过使用v-bind:class绑定来实现。你可以维护一个数据属性来记录选中的项,并根据这个属性来给不同的项添加特定的类名。

以下是一个简单的例子:

<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in items"
        :key="index"
        :class="{ 'active': selectedItem === item }"
        @click="selectItem(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const items = ref(['Item 1', 'Item 2', 'Item 3']);
    const selectedItem = ref(null);
 
    function selectItem(item) {
      selectedItem.value = item;
    }
 
    return {
      items,
      selectedItem,
      selectItem
    };
  }
};
</script>
 
<style>
.active {
  color: red;
}
</style>

在这个例子中,我们有一个循环的列表项items,每个列表项都可以被点击,点击后会调用selectItem方法,并将当前项设置为selectedItem.active类包含了我们想要添加到选中项的样式。当selectedItem与当前循环项item相等时,active类就会被添加到该项的元素上。

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

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

相关文章

【QML 基础】QML ——描述性脚本语言,用于用户界面的编写

文章目录 1. QML 定义 1. QML 定义 &#x1f427; QML全称为Qt Meta-Object Language&#xff0c;QML是一种描述性的脚本语言&#xff0c;文件格式以.qml结尾。支持javascript形式的编程控制。QML是Qt推出的Qt Quick技术当中的一部分&#xff0c;Qt Quick是 Qt5中用户界面的涵…

React框架搭建,看这一篇就够了,看完你会感谢我

传统搭建框架的方式 在2024年以前&#xff0c;我们构建框架基本上采用官方脚手架&#xff0c;但是官方脚手架其实大概率都不符合我们的项目要求&#xff0c;搭建完了以后往往需要再继续集成一些第三方的包。这时候又会碰到一些版本冲突&#xff0c;配置教程等&#xff0c;往往…

C++入门基础知识九

1.string类对象的容量操作 函数名称功能说明size返回字符串有效长度length返回字符串有效长度capacity返回总空间大小empty检测字符串是否为空&#xff0c;为空返回true&#xff0c;否则falseclear清空有效字符reserve为字符预留空间number大小空间resize将有效字符改为n个&am…

Qt窗口——QToolBar

文章目录 工具栏创建工具栏设置toolTip工具栏配合菜单栏工具栏浮动状态 工具栏 QToolBar工具栏是应用程序中集成各种功能实现快捷键使用的一个区域。 可以有多个&#xff0c;也可以没有。 创建工具栏 #include "mainwindow.h" #include "ui_mainwindow.h&qu…

【Python报错已解决】ModuleNotFoundError: No module named ‘sklearn‘

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 专栏介绍 在软件开发和日常使用中&#xff0c;BUG是不可避免的。本专栏致力于为广大开发者和技术爱好者提供一个关于BUG解决的经…

App Fiddler抓包配置

1. 概述 Android Fiddler是一个非常强大的抓包工具&#xff0c;可以用来捕获并分析Android设备上的网络请求和响应。在实现"android fiddler 抓包https"的过程中&#xff0c;我们需要进行以下步骤&#xff1a; 安装Fiddler并配置代理 配置Android设备的网络代理 在Fi…

机器人的动力学——牛顿欧拉,拉格朗日,凯恩

机器人的动力学推导方法有很多&#xff0c;常用得有牛顿&#xff0c;拉格朗日&#xff0c;凯恩等方法&#xff0c;接下来&#xff0c;简单说说他们之间的使用。注&#xff1a;这里不考虑怎么来的&#xff0c;只说怎么应用。 参考1&#xff1a;4-14动力学分析方法-牛顿—欧拉方…

linux下的日志编写

1、日志初始化创建 2、日志写入 3、日志关闭 log.c #include "log.h"static log_t LOG;//初始化日志文件&#xff0c;在当前目录创建日志文件 int log_init(char *pdirname) {time_t t;struct tm *ptm NULL;char filepath[64] {0};int ret 0;time(&t);ptm …

MySQL_表的基本操作

课 程 推 荐我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448;入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448;虚 拟 环 境 搭 建 &#xff1a;&#x1…

Contact Form 7最新5.9.8版错误修复方案

最近有多位用户反应Contact Form 7最新5.9.8版的管理页面有错误如下图所示 具体错误文件的路径为wp-content\plugins\contact-form-7\admin\includes\welcome-panel.php on line 153 找到welcome-panel.php这个文件编辑它&#xff0c;将如下图选中的部分删除 删除以后&#xf…

华为OD机试 - 报数问题 - 约瑟夫环(Java 2024 E卷 100分)

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;E卷D卷A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加…

python画图|在3D图上画2D直方图(作图平面移动)

前期我们已经学习过2D和3D的直方图绘制&#xff1a; 二维常规直方图绘制&#xff1a;python画图|水平直方图绘制_绘制水平直方图-CSDN博客 二维极坐标直方图绘制&#xff1a;python画图|极坐标中画直方图_ax1.plot()怎么画直方图-CSDN博客 三维直方图绘制&#xff1a;python…

Spring考点总结

01.Spring框架的基本理解 关键字:核心思想IOC\AOP\作用(解耦、简化)&#xff0c;简单描述框架组成 Spring框架是一款轻量级的开发框架&#xff0c;核心思想是IOC&#xff08;控制反转&#xff09;和AOP&#xff08;面向切面编程&#xff09;&#xff0c; 为Java应用程序开发…

使用Addressables+SpriteAtlas打包产生冗余

1&#xff09;使用AddressablesSpriteAtlas打包产生冗余 2&#xff09;使用SBP打AssetBundle脚本引用丢失 3&#xff09;Unity构建后处理&#xff08;IPostprocessBuildWithReport等接口&#xff09;抛出异常后&#xff0c;构建不会停止 4&#xff09;Unity 2022.3.0版本使用Oc…

基于YOLOv8的RTSP视频流实时目标检测与告警系统设计与实现(超详细)

前言 在训练模型完成后&#xff0c;想把模型应用起来&#xff0c;比如模型可以部署到项目中&#xff0c;实时接收RTSP视频流进行识别检测&#xff0c;一旦达到自己所设置的置信度阈值&#xff08;例如大于0.5&#xff09;&#xff0c;系统就会实时把报警信息发送给服务端&…

基于web的工作管理系统设计与实现

博主介绍&#xff1a;专注于Java vue .net php phython 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟 我的博客空间发布了1000毕设题目 方便大家学习使用 感兴趣的…

01 Vim 编辑器的简单使用

目前在类liunx系统上&#xff0c;我们使用比较多的是 vim 编辑器。vim 具有程序编辑的能力&#xff0c;可以主动的以字体颜色辨别语法的正确性&#xff0c;方便程序设计。 文章目录 1 vim介绍2 vim 三种模式3 常用快捷键一般模式操作&#xff1a;切换模式操作&#xff1a;增删…

体感魂斗罗(一)

文章目录 体感魂斗罗实现步骤设备读取摄像头视频流使用电脑摄像头读取局域网内手机摄像头效果示意IP摄像头底部工具栏 体感魂斗罗实现步骤 目前想到的有如下步骤 读取摄像头视频流图像检测人体关键点关键点转换为人体姿势固定姿势转换键盘键位 设备 摄像头&#xff08;可用手…

[数据集][目标检测]文本表格检测数据集VOC+YOLO格式6688张5类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;6688 标注数量(xml文件个数)&#xff1a;6688 标注数量(txt文件个数)&#xff1a;6688 标注…

上半年亏损扩大/百亿资产重组终止,路畅科技如何“脱困”?

在智能网联汽车市场形势一片大好的前提下&#xff0c;路畅科技上半年的营收却出现了下滑&#xff0c;并且亏损也进一步扩大。 2024年半年度报告显示&#xff0c;路畅科技营业收入1.35亿元&#xff0c;同比下滑7.83%&#xff1b;实现归属上市公司股东的净利润为亏损2491.99万元…