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

爱被打了一巴掌 2023-10-05 13:27 13阅读 0赞

# **目录** #

0、警醒自己

一、v-for列表渲染

1、概述

2、代码演示

3、运行结果

二、VUE官方文档

1、地址

--------------------

# 0、警醒自己 #

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

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

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

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

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

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

# 一、v-for列表渲染 #

## 1、概述 ##

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

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

## 2、代码演示 ##

<template>
    	<view>
    		
    		<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>

## 3、运行结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

# 二、VUE官方文档 #

## 1、地址 ##

[https://cn.vuejs.org/v2/guide/list.html][https_cn.vuejs.org_v2_guide_list.html]

（更多更详细的用法见官方文档！）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201111115440706.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[https_cn.vuejs.org_v2_guide_list.html]: https://cn.vuejs.org/v2/guide/list.html