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

uniapp列表实现方式 v-for

创建列表视图 v-for

v-for=“对象item in 数组”
v-for=“(对象item,下标) in 数组”
v-for=“(对象item,使用这个键取到的值,下标) in 数组”
:key 绑定标识 一般建议使用对象中的id等值 类型 any

<template><view><view class="line" v-for="item in list" :key="item.title" @click="itemClick(key)"><image class="imageStype" src="../../static/logo.png"></image><text class="textHellow">{{item.title}}</text></view><view class="line" v-for="(item,i) in list" :key="i" @click="itemClick(key)"><image class="imageStype" src="../../static/logo.png"></image><text class="textHellow">{{item.title}}</text></view><view class="line" v-for="(item,title,i) in list" :key="i" @click="itemClick(key)"><image class="imageStype" src="../../static/logo.png"></image><text class="textHellow">{{title}}</text></view></view>
</template>
<script>export default {data() {return {list: [{title: 0}, {title: 1}, {title: 2}]}},methods: {itemClick(ii) {// setInterval(() => {// 	Array.from(this.list).forEach((item)=>{// 		item.title +=1 // 	})// }, 2000)setTimeout(() => {Array.from(this.list).forEach((item) => {item.title += 1})}, 2000)}},beforeDestroy() {}}
</script><style>.imageStype {width: 120rpx;height: 120rpx;margin-left: 40rpx;}.line {margin-top: 20rpx;display: flex;flex-direction: row;padding-top: 40rpx;padding-bottom: 40rpx;width: 670rpx;margin-left: 40rpx;border: 2rpx solid gray;border-radius: 16rpx;background-color: aliceblue;box-shadow: 8rpx 8rpx 4rpx 0 gray;}.textHellow {margin-left: 20rpx;font-weight: bold;font-size: 32rpx;}
</style>

在这里插入图片描述

相关文章:

uniapp列表实现方式 v-for

创建列表视图 v-for v-for“对象item in 数组” v-for“(对象item&#xff0c;下标) in 数组” v-for“(对象item&#xff0c;使用这个键取到的值&#xff0c;下标) in 数组” :key 绑定标识 一般建议使用对象中的id等值 类型 any <template><view><view clas…...

SqlAlchemy使用教程(三) CoreAPI访问与操作数据库详解

SqlAlchemy使用教程(一) 原理与环境搭建SqlAlchemy使用教程(二) 入门示例及编程步骤 三、使用Core API访问与操作数据库 Sqlalchemy 的Core部分集成了DB API, 事务管理&#xff0c;schema描述等功能&#xff0c;ORM构筑于其上。本章介绍创建 Engine对象&#xff0c;使用基本的…...

PDF有编辑密码怎么办

目录 注意&#xff1a; windows方法&#xff1a; 1 python 下载 2 打开命令行 3 安装 pikepdf 4 编写python脚本 5 使用py脚本 6解密完成 Linux方法&#xff1a; 注意&#xff1a; 此方法可以用于破解PDF的编辑密码&#xff0c;而不是PDF的打开密码 当遇到类似如下问…...

智慧公厕:打造智慧城市公共厕所信息化管理的新升级

在现代社会中&#xff0c;随着科学技术的不断进步与应用&#xff0c;智慧公厕作为公共服务设施&#xff0c;正迎来一次新的升级与革新。利用先进技术&#xff0c;智慧公厕实现了信息化升级&#xff0c;能够实时监测人员、环境和设备状况&#xff0c;提高使用效率、安全性、舒适…...

gin-vue-admin二开使用雪花算法生成唯一标识 id

场景介绍 需求场景&#xff1a; 总部采集分支的数据&#xff0c;由于分支的 id 是子增的主键 id&#xff0c;所以会出现重复的 id&#xff0c;但是这个 id 需要作为标识&#xff0c;没有实际作用&#xff0c;这里选择的是分布式 id 雪花算法生成 id 存储用来标识&#xff0c;这…...

文心一言 vs. ChatGPT:哪个更胜一筹?

文心一言 vs. ChatGPT&#xff1a;从简洁美到深度思考的文本生成之旅 近年来&#xff0c;文本生成工具的崛起使得人们在表达和沟通方面拥有了更多的选择。在这个领域中&#xff0c;文心一言和ChatGPT作为两个备受瞩目的工具&#xff0c;各自以独特的优势展现在用户面前。本文将…...

LoadBalancer 替换 Ribbon

POM 移除 Ribbon 相关依赖 <!-- LoadBalancer 必须引入 springcloud --> <!-- 父pom引入springcloud 版本管理 --> https://spring.io/projects/spring-cloud/ 官网查看 boot 对应的 cloud 的版本 <dependencyManagement><dependency> <groupI…...

Jsqlparser简单学习

文章目录 学习链接模块访问者模式parser模块statement模块Expression模块deparser模块 测试TestDropTestSelectTestSelectVisitor 学习链接 java设计模式&#xff1a;访问者模式 github使用示例参考 测试 JSqlParser使用示例 JSqlParse&#xff08;一&#xff09;基本增删改…...

IC验证——perl脚本ccode_standard——c代码寄存器配置标准化

目录 1 脚本名称 2 脚本路径 3 脚本参数说明 4 脚本操作说明 5 脚本代码 1 脚本名称 ccode_standard 2 脚本路径 /scripts/bin/ccode_standard 3 脚本参数说明 次序 参数名 说明 1 address (./rfdig&#xff1b;.&#xff1b;..&#xff1b;./boot) 指定脚本执行路…...

Qt单个字符判断

1.相关说明 字符的Unicode编码、单个字符的判断 2.界面绘制 3.相关主要代码 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui;…...

通过OpenIddict设计一个授权服务器02-创建asp.net项目

在这一部分中&#xff0c;我们将创建一个ASPNET核心项目&#xff0c;作为我们授权服务器的最低设置。我们将使用MVC来提供页面&#xff0c;并将身份验证添加到项目中&#xff0c;包括一个基本的登录表单。 创建一个空的asp.net core项目 正如前一篇文章中所说&#xff0c;授权…...

2.6、云负载均衡产品详述

一、定义 弹性负载均衡(Elastic Load Balance&#xff0c;简称ELB)可将来自公网的访问流量分发到后端云主机&#xff0c;可选多种负载均衡策略&#xff0c;并支持自动检测云主机健康状况&#xff0c;消除单点故障&#xff0c;保障应用系统的高可用。 二、产品架构 1&am…...

黑马程序员 Docker笔记

本篇学习笔记文档对应B站视频&#xff1a; 同学们&#xff0c;在前两天我们学习了Linux操作系统的常见命令以及如何在Linux上部署一个单体项目。大家想一想自己最大的感受是什么&#xff1f; 我相信&#xff0c;除了个别天赋异禀的同学以外&#xff0c;大多数同学都会有相同的…...

游戏素材永不缺,免费在线AI工具Scenario功能齐全,简单易用

Scenario是一个在线的AI驱动的工具&#xff0c;主要用于游戏艺术创作。它提供了一套全面的功能&#xff0c;旨在帮助游戏开发者创建与其独特风格和艺术方向相符的独特、高质量的游戏艺术。Scenario的突出特点之一是它的微调能力&#xff0c;允许用户根据独特的风格和艺术方向训…...

ChatGPT和文心一言哪个好用?

#ChatGPT 和文心一言哪个更好用&#xff1f;# 在当今信息爆炸的时代&#xff0c;人们对于文本生成和创作工具的需求越来越高。在这个背景下&#xff0c;ChatGPT和文心一言作为备受瞩目的工具&#xff0c;各自拥有独特的功能和用途。在本文中&#xff0c;我们将深入探讨这两个工…...

纯c++简易的迷宫小游戏

一个用c写的黑框框迷宫 适合新手入门学习 也适合大学生小作业 下面附上代码 总体思路 初始化游戏界面&#xff1a;设置迷宫的大小&#xff08;WIDTH和HEIGH&#xff09;&#xff0c;生成迷宫地图&#xff08;map&#xff09;&#xff0c;包括墙壁、空地、起点和终点。显示…...

基于python舆情分析可视化系统+情感分析+爬虫+机器学习(源码)✅

大数据毕业设计&#xff1a;Python招聘数据采集分析可视化系统✅ 毕业设计&#xff1a;2023-2024年计算机专业毕业设计选题汇总&#xff08;建议收藏&#xff09; 毕业设计&#xff1a;2023-2024年最新最全计算机专业毕设选题推荐汇总 &#x1f345;感兴趣的可以先收藏起来&…...

2024年1月16日Arxiv热门NLP大模型论文:Multi-Candidate Speculative Decoding

大幅提速NLP任务&#xff0c;无需牺牲准确性&#xff01;南京大学提出新算法&#xff0c;大幅提升AI文本生成效率飞跃 引言&#xff1a;探索大型语言模型的高效文本生成 在自然语言处理&#xff08;NLP&#xff09;的领域中&#xff0c;大型语言模型&#xff08;LLMs&#xf…...

AI对决:ChatGPT与文心一言的比较

文章目录 引言ChatGPT与文心一言的比较Chatgpt的看法文心一言的看法Copilot的观点chatgpt4.0的回答 模型的自我评价自我评价 ChatGPT的优势在这里插入图片描述 文心一言的优势AI技术发展趋势总结 引言 在过去的几年里&#xff0c;人工智能&#xff08;AI&#xff09;技术取得了…...

uni-app引用矢量库图标

矢量库引用 导入黑色图标 1.生成连接&#xff0c;下载样式 2.导入项目&#xff08;字体样式&#xff09; 3.引入css样式 4.替换font-face 5.使用图标&#xff08;字体图标&#xff0c;只有黑色&#xff09; 导入彩色图标 1.安装插件 npm install -g iconfont-tools2.…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

Mac flutter环境搭建

一、下载flutter sdk 制作 Android 应用 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 1、查看mac电脑处理器选择sdk 2、解压 unzip ~/Downloads/flutter_macos_arm64_3.32.2-stable.zip \ -d ~/development/ 3、添加环境变量 命令行打开配置环境变量文件 ope…...

如何通过git命令查看项目连接的仓库地址?

要通过 Git 命令查看项目连接的仓库地址&#xff0c;您可以使用以下几种方法&#xff1a; 1. 查看所有远程仓库地址 使用 git remote -v 命令&#xff0c;它会显示项目中配置的所有远程仓库及其对应的 URL&#xff1a; git remote -v输出示例&#xff1a; origin https://…...

Canal环境搭建并实现和ES数据同步

作者&#xff1a;田超凡 日期&#xff1a;2025年6月7日 Canal安装&#xff0c;启动端口11111、8082&#xff1a; 安装canal-deployer服务端&#xff1a; https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...

PostgreSQL 与 SQL 基础:为 Fast API 打下数据基础

在构建任何动态、数据驱动的Web API时&#xff0c;一个稳定高效的数据存储方案是不可或缺的。对于使用Python FastAPI的开发者来说&#xff0c;深入理解关系型数据库的工作原理、掌握SQL这门与数据库“对话”的语言&#xff0c;以及学会如何在Python中操作数据库&#xff0c;是…...

Centos 7 服务器部署多网站

一、准备工作 安装 Apache bash sudo yum install httpd -y sudo systemctl start httpd sudo systemctl enable httpd创建网站目录 假设部署 2 个网站&#xff0c;目录结构如下&#xff1a; bash sudo mkdir -p /var/www/site1/html sudo mkdir -p /var/www/site2/html添加测试…...