数组类型在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