VUE----v-for基本用法

父元素：v-for="(  item ,  index  ) in list "  :key="index"

子元素：{{  item  }}             {{item.text}}

list代表被循环的数组

item表示数组内的子元素，数组里有多少个一级子元素，就有多少个遍历子元素

index代表下标，一般点击事件可以携带的参数

：key绑定唯一标识

子元素用{{ }} 绑定获取

 优点：只用增减数组，就能控制显示多少子元素，减少HTML代码，不再写死数据，方便以后对接口。

示例：

 

HTML：

<template>
	<view>
		<view class="wai">
			<view class="box" v-for="(item,index) in list" :key="index">
				<text>{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

JS：

<script>
	export default {
		data() {
			return {
				list:[
					{text:'第1个'},
					{text:'第2个'},
					{text:'第3个'},
					{text:'第4个'},
					{text:'第5个'},
					{text:'第6个'},
					{text:'第7个'},
					{text:'第8个'}
				]
			}
		},
		   methods: {
			   
		     }
	}
</script>

CSS：

<style scoped>
	.wai{
		width: 100%;
		height: 412rpx;
		background-color: #55ffff;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.box{
		width: 24%;
		height: 200rpx;
		background-color: #F0AD4E;
		margin-bottom: 6rpx;
		font-size: 40rpx;
	}
</style>