uniapp列表实现方式 v-for

创建列表视图 v-for

v-for="对象item in 数组"

v-for="(对象item,下标) in 数组"

v-for="(对象item,使用这个键取到的值,下标) in 数组"

:key 绑定标识 一般建议使用对象中的id等值 类型 any

html 复制代码
<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>
		
相关推荐
可触的未来,发芽的智生14 分钟前
追根索源:换不同的词嵌入(词向量生成方式不同,但词与词关系接近),会出现什么结果?
javascript·人工智能·python·神经网络·自然语言处理
Yeats_Liao17 分钟前
Go Web 编程快速入门 07.4 - 模板(4):组合模板与逻辑控制
开发语言·后端·golang
努力写代码的熊大25 分钟前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER26 分钟前
React 06
前端·javascript·笔记·学习·react.js·前端框架
lightqjx34 分钟前
【C++】list 常见使用和模拟实现
开发语言·c++
ceclar1231 小时前
C++容器queue
开发语言·c++
陈皮话梅糖@1 小时前
Speckit和Claude 的初体验
开发语言·ide
屈冠成1 小时前
C语言数组:编辑世界的坚固桥梁
c语言·开发语言·算法
zzzyyy5382 小时前
STL简介
开发语言·c++
艾莉丝努力练剑2 小时前
【C++:继承】C++面向对象继承全面解析:派生类构造、多继承、菱形虚拟继承与设计模式实践
linux·开发语言·c++·人工智能·stl·1024程序员节