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

本文介绍了如何在uni-app框架下利用【v-for】循环展示数组数据,通过实例展示了创建数组及使用v-for指令进行循环的完整代码,最后给出了循环渲染后的实际效果。
摘要由CSDN通过智能技术生成

数组类型在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
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值