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

目录

    • 源码
    • 图片
    • 最后

源码

<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.hqwc.cn/news/160951.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言_常用数据类型地址的理解

常用基本数据类型&#xff1a; #include <stdio.h> #include <stdlib.h> #include <stdint.h>int main(){printf("基本数据类型:\n");printf("char: %d\n", sizeof(char));printf("int: %d\n", sizeof(int));printf("do…

操作系统——内存映射文件(王道视频p57)

1.总体概述&#xff1a; 2.传统文件访问方式&#xff1a; 我认为&#xff0c;这种方式最大的劣势在于&#xff0c;如果要对整个文件的不同部分进行多次操作的话&#xff0c;这样确实开销可能会大一些&#xff0c;而且程序员还要指定对应的“分块”载入到内存中 3.内存映射文件…

【网络】HTTPS协议

HTTPS协议 一、什么是HTTPS二、数据的加密1、常见的加密方式2、数据摘要&#xff08;数据指纹&#xff09;3、数字签名 三、HTTPS 的工作过程探究1、方案 1 - 只使用对称加密2、方案 2 - 只使用非对称加密3、方案 3 - 双方都使用非对称加密4、方案 4 - 非对称加密 对称加密 四…

文件夹重命名与大小写转换:提高文件检索准确性的技巧

在文件管理中&#xff0c;文件夹的命名和大小写转换是非常重要的操作。正确的文件夹命名和大小写转换可以提高文件检索的准确性&#xff0c;从而提高工作效率和文件管理的便利性。现在来看云炫文件管理器如何进行文件夹重命名和大小写转换的技巧&#xff0c;以帮助您更好地管理…

2023年金融科技建模大赛(初赛)开箱点评

各位同学大家好&#xff0c;我是Toby老师。2023年金融科技建模大赛&#xff08;初赛&#xff09;从今年10月14日开始&#xff0c;11月11日结束。 比赛背景 发展数字经济是“十四五”时期的重大战略规划。2023年&#xff0c;中共中央、国务院印发了《数字中国建设整体布局规划》…

MASK-RCNN tensorflow环境搭建

此教程默认你已经安装了Anaconda&#xff0c;且tensorflow 为cpu版本。为什么不用gpu版本&#xff0c;原因下面解释。 此教程默认你已经安装了Anaconda。 因为tensorflow2.1后的gpu版&#xff0c;不支持windows。并且只有高版本的tensorflow才对应我的CUDA12.2&#xff1b; 而…

16. 机器学习 - 决策树

Hi&#xff0c;你好。我是茶桁。 在上一节课讲SVM之后&#xff0c;再给大家将一个新的分类模型「决策树」。我们直接开始正题。 决策树 我们从一个例子开始&#xff0c;来看下面这张图&#xff1a; 假设我们的x1 ~ x4是特征&#xff0c;y是最终的决定&#xff0c;打比方说是…

Pikachu(一)

暴力破解 Burte Force&#xff08;暴力破解&#xff09;概述 “暴力破解”是一攻击手段&#xff0c;在web攻击中&#xff0c;一般会使用这种手段对应用系统的认证信息进行获取。 其过程就是使用大量的认证信息在认证接口进行尝试登录&#xff0c;直到得到正确的结果。 为了提高…

Jmeter只能做性能测试吗?

Jmeter除了可以性能测试&#xff0c;还能做接口测试 1、Jmeter和Fiddler&#xff0c;Postman有什么区别? Fiddler&#xff1a;虽然有接口测试功能&#xff0c;很少用来做接口测试。 一般用Fiddle来做抓包和异常测试&#xff0c;辅助接口测试。Postman&#xff1a; 是接口调试…

QML 仪表盘小示例

本次项目已发布在CSDN->GitCode,下载方便,安全,可在我主页进行下载即可,后面的项目和素材都会发布这个平台。 个人主页:https://gitcode.com/user/m0_45463480怎么下载:在项目中点击克隆,windows:zip linux:tar.gz tar # .pro TEMPLATE = appTARGET = dialcontrol​#…

【MySQL】MVCC机制(undo log,read view)

文章目录 前言一. 预备知识二. 模拟MVCC三. Read View四. RC与RR的本质区别结束语 前言 MVCC&#xff08;多版本并发控制&#xff09;是一种用来解决读-写冲突的无锁并发控制 MVCC为事务分配单向增长的事务ID&#xff0c;为每个修改保存一个版本&#xff0c;版本与事物ID相关联…

【PyTorch实战演练】AlexNet网络模型构建并使用Cifar10数据集进行批量训练(附代码)

目录 0. 前言 1. Cifar10数据集 2. AlexNet网络模型 2.1 AlexNet的网络结构 2.2 激活函数ReLu 2.3 Dropout方法 2.4 数据增强 3. 使用GPU加速进行批量训练 4. 网络模型构建 5. 训练过程 6. 完整代码 0. 前言 按照国际惯例&#xff0c;首先声明&#xff1a;本文只是我…