uniapp循环对象列表---点击列表切换选中不同状态

news2024/11/16 21:49:07

目录

    • 源码
    • 图片
    • 最后

源码

<template>
  <view>
    <ul>
      <li v-for="(item, index) in list" @click="toggleSelection(index)" :class="{selected: selectedIndex === index}">
        {{ item }}
		<view :class="{selected: selectedIndex === index}">
			123123
			<image src="" mode=""></image>
		</view>
      </li>
    </ul>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3'],
      selectedIndex: -1
    };
  },
  methods: {
    toggleSelection(index) {
      if (this.selectedIndex === index) {
        this.selectedIndex = -1;
      } else {
        this.selectedIndex = index;
      }
    }
  }
};
</script>

<style>
.selected {
  background-color: yellow;
}
</style>

图片

请添加图片描述

最后

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

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

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

相关文章

系列五、映射文件xxxMapper.xml

一、概述 mapper映射文件是mybatis中最重要的部分&#xff0c;涉及到的细节也非常多。 1.1、parameterType 表示输入参数的类型。例如&#xff1a; <select id"getUserById" parameterType"integer" resultType"org.star.entity.model.UserDO&…

Mysql数据库基础知识补充

sql知识补充 一.数据库的操作1.显示当前数据库2.创建数据库3.使用数据库4.删除数据库 二.常用数据类型1.数值类型2.字符串类型3.日期类型 三.表的操作1.查看表结构2.创建表3.删除表 一.数据库的操作 1.显示当前数据库 2.创建数据库 3.使用数据库 4.删除数据库 二.常用数据类型…

netty实战-手写通信框架

通信框架功能设计 功能描述 通信框架承载了业务内部各模块之间的消息交互和服务调用&#xff0c;它的主要功能如下&#xff1a; 基于 Netty 的 NIO 通信框架&#xff0c;提供高性能的异步通信能力&#xff1b; 提供消息的编解码框架&#xff0c;可以实现 POJO 的序列化和反序…

轻松部署Swagger Editor:安装Docker并实现远程访问编辑API文档

文章目录 Swagger Editor本地接口文档公网远程访问1. 部署Swagger Editor2. Linux安装Cpolar3. 配置Swagger Editor公网地址4. 远程访问Swagger Editor5. 固定Swagger Editor公网地址 Swagger Editor本地接口文档公网远程访问 Swagger Editor是一个用于编写OpenAPI规范的开源编…

Java算法:选择排序

一、选择排序 选择排序&#xff08;Selection sort&#xff09;是一种简单直观的 排序算法 。 工作原理&#xff1a;第一次从待排序的 数据元素 中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;然后再从剩余的未排序元素中寻…

Android Snackbar

1.Snackbar Snackbar是Material Design中的一个控件&#xff0c;用来代替Toast。Snackbar是一个类似Toast的快速弹出消息提示的控件。Snackbar在显示上比Toast丰富&#xff0c;而且提供了用户交互的接口。 ①默认情况下&#xff0c;Snackbar显示在屏幕底部&#xff0c;它出现…

蓝鹏测控测宽仪系列又添一员大将——双目测宽仪

轧钢过程中钢板的宽度是一个重要的参数&#xff0c;它直接决定了成材率。同时&#xff0c;随着高新科技越来越广泛的应用到工程实际中&#xff0c;许多控制系统需要钢板实时宽度值作为模型参数。 当前&#xff0c;相当一部分宽厚板厂还在采用人工检测的方法&#xff0c;检测环境…

一文5个步骤用Jmeter做接口测试!

说实话&#xff0c;在游戏测试领域&#xff0c;做接口测试的并不多&#xff0c;做的好的更是寥寥无几&#xff08;请大家不要喷游戏测试比较low&#xff0c;行业现状如此而已&#xff09;。绝大部分游戏测试人员都是以功能测试为主&#xff0c;偶尔做做性能测试和压力测试已经很…

STM32F103C8T6第二天:认识STM32 标准库与HAL库 GPIO口 推挽输出与开漏输出

1. 课程概述&#xff08;297.1&#xff09; 课程要求&#xff1a;C语言熟练&#xff0c;提前学完 C51 2. 开发软件Keil5的安装&#xff08;298.2&#xff09; 开发环境的安装 编程语言&#xff1a;C语言需要安装的软件有两个&#xff1a;Keil5 和 STM32CubeMX Keil5 的安装…

Fiddler实现 HTTP 网络抓包

文章目录 前言Fiddler 是什么下载 Fiddler1. 官网下载 Fiddler Classic2. 安装 Fiddler Classic3. 打开 Fiddler Classic 前言 前面我们简单地学习了关于应用层——自定义协议的知识&#xff0c;但是这都只是自定义协议&#xff0c;在实际生活中自定义协议用的还是占少数的&am…

终于有人把VMware虚拟机三种网络模式讲清楚了!

你们好&#xff0c;我的网工朋友。 前段时间VMware更新了&#xff0c;你用上最新版了吗&#xff1f; 有几个网工朋友留言说&#xff0c;在操作中遇到过各种各样的问题。比如说由于公司服务器重启导致出现下面的问题&#xff1a; 在Xshell里连接虚拟机映射时连接失败&#xf…

【Java|golang】2103. 环和杆---位运算

总计有 n 个环&#xff0c;环的颜色可以是红、绿、蓝中的一种。这些环分别穿在 10 根编号为 0 到 9 的杆上。 给你一个长度为 2n 的字符串 rings &#xff0c;表示这 n 个环在杆上的分布。rings 中每两个字符形成一个 颜色位置对 &#xff0c;用于描述每个环&#xff1a; 第 …

k8s之亲和性、污点

目录 亲和性 键值运算关系 硬策略 软策略 Pod亲和性与反亲和性 污点(Taint) 和 容忍(Tolerations) 污点(Taint) 容忍(Tolerations) 维护操作 故障排除步骤 亲和性 官方介绍&#xff1a;https://kubernetes.io/zh/docs/concepts/scheduling-eviction/assign-pod-nod…

nn.LayerNorm解释

这个是层归一化。我们输入一个参数&#xff0c;这个参数就必须与最后一个维度对应。但是我们也可以输入多个维度&#xff0c;但是必须从后向前对应。 import torch import torch.nn as nna torch.rand((100,5)) c nn.LayerNorm([5]) print(c(a).shape)a torch.rand((100,5,…

JMeter 接口自动化测试的最佳实践 (建议收藏)

JMeter 是一个开源的负载测试工具&#xff0c;它可以模拟多种协议和应用程序的负载&#xff0c;包括 HTTP、FTP、SMTP、JMS、SOAP 和 JDBC 等。在进行接口自动化测试时&#xff0c;使用 JMeter 可以帮助我们快速地构建测试用例&#xff0c;模拟多种场景&#xff0c;发现接口的性…

神舟十六乘组凯旋:故障预测与健康管理PHM在航空航天领域的关键作用

10月31日&#xff0c;神舟十六号载人飞船在经历五个月的太空飞行后顺利返回&#xff0c;安全着陆在内蒙古的东风着陆场&#xff0c;三位航天员安全顺利出舱。这意味着神舟十六号载人飞行任务取得圆满成功&#xff0c;标志着我国载人航天事业再创辉煌。在这背后&#xff0c;离不…

windows和docker环境下springboot整合gdal3.x

链接: gdal官网地址 gdal gdal的一个用c语言编写的库&#xff0c;用于处理地理信息相关的数据包括转换&#xff0c;识别数据&#xff0c;格式化数据以及解析 同时提供第三方语言的SDK包括python&#xff0c;java上述需要编译后使用 java是需要使用jni接口调用实现方法在wind…

力扣 搜索二维矩阵 二分

&#x1f468;‍&#x1f3eb; 搜索二维矩阵 ✨ AC code class Solution {public boolean searchMatrix(int[][] matrix, int target){int l 0;int row matrix.length;int col matrix[0].length;int r row * col - 1;while (l < r){int m l r >> 1;int x m / …

YOLOv7改进:加入解耦头Decoupled_Detect,涨点明显

💡💡💡本文全网首发独家改进:Decoupled_Detect,Hybrid Channels 策略重新设计了一个更高效的解耦头结构 Decoupled_Detect | 亲测在多个数据集能够实现涨点,多尺度特性在小目标检测表现也十分出色。 收录: YOLOv7高阶自研专栏介绍: http://t.csdnimg.cn/tYI0c…

响应式设计疑难问题全解析!一篇读懂,立即上手

在我们当前的技术环境中&#xff0c;响应式设计已经成为前端开发的重要部分。其目标是让网站能够以最优的方式在任何设备上工作——不论是大屏电脑、笔记本、平板还是智能手机。这就要求网页能够自适应不同设备的屏幕大小。下面就让我们深入浅出地探讨响应式设计的精髓&#xf…