【Uni-App社区小程序】015-列表渲染

訾博ZiBo

发布于 2025-01-06 15:34:47

4700

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

0、警醒自己

1、学习不用心，骗人又骗己；

2、学习不刻苦，纸上画老虎；

3、学习不惜时，终得人耻笑；

4、学习不复习，不如不学习；

5、学习不休息，毁眼伤身体；

6、狗才等着别人喂，狼都是自己寻找食物；

一、v-for列表渲染

1、概述

我们可以用 v-for 指令基于一个数组来渲染一个列表；

v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名；

2、代码演示

<template>
	<view>
		<!-- 凡是用到v-for都指定一个:key为index或id,要不然会报错 -->
		<view v-for="(value,index) in list1" :key="index">
			{{index}}-{{value}}
		</view>
		<!-- 常用写法 -->
		<view v-for="(value,index) in list2" :key="index">
			{{index}}-{{value.name}}-{{value.age}}
		</view>
		<!-- 更复杂的写法 -->
		<view v-for="(value,index) in list3" :key="index">
			{{index}}-{{value.name}}-{{value.age}}
			<view v-for="(value1,index1) in value.bobby" :key="index1">
				{{value1}}-{{index1}}
			</view>
		</view>
		<!-- 循环对象 -->
		<view v-for="(value,name) in user" :key="index">
			{{name}}-{{value}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1:["大哥","二哥","三哥","四哥"],
				list2:[
					{name:"大哥",age:22},
					{name:"二哥",age:21},
					{name:"三哥",age:20},
					{name:"四哥",age:19},
				],
				list3:[
					{name:"大哥",age:22,bobby:["学习1","运动1"]},
					{name:"二哥",age:21,bobby:["学习2","运动2"]},
					{name:"三哥",age:20,bobby:["学习3","运动3"]},
					{name:"四哥",age:19,bobby:["学习4","运动4"]},
				],
				user:{
					username : "訾博",
					age : 24,
					tall : "183CM",
					hobby : ["学习","游戏","创造"]
				},
			}
		},
		methods: {
			
		},
	}
</script>

<style>
	.box{
		background: #007AFF;
		color: #FFFFFF;
		height: 350upx;
		width: 350upx;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 50upx;
	}
</style>