Bootstrap

VUE(uni-app框架)开发微信小程序②-for循环

数组类型在uni-app中属于一个比较常见的类型,可是想将数组中的数据展现出来就需要借助循环,今天来认识一下【v-for】循环

先新规一个数组

//数组
list:[
	{
	 id:0,
	 text:"香蕉🍌",
	 price:30

	},
	 {
	 id:1,
	 text:"葡萄🍇",
	 price:40
	 },
	 {
	 id:2,
	 text:"橙子🍊",
	 price:20
	 }
]

再用v-for循环展示出来(index就是索引,list指上文定义的数组,key指唯一变量)

<view v-for="(item,index) in list"
	:key="item.id">
	   名称:{
  {item.text}}  ||  价格:{
  {item.price}}元/公斤
</view>

整体代码如下:

<template>
	<view class="content">
		<view>@@@@@ 水果价目表 @@@@@</view>
		<view v-for="(item,index) in list"
			:key="item.id">
			   名称:{
  {item.text}}  ||  价格:{
  {item.price}}元/公斤
		</view>
	</view>
</template>
<script&g
;