当前位置:首页 > uni-app开发 > 正文

uni-app开发纪念日小程序(1) v-for如何使用

最近自己打算做一个自己的小程序用,很快被uni-app的快速开发,一码多用给吸引了,于是开始学习uni-app开发之路.

由于之前没有接触过vue,所以上手稍微吃点力,很多语法包括es6的,vue,scss的等等都需要学习,慢慢来吧。

前几天做好了首页页面,今天准备开始做数据绑定,首先在index.vue中造一批模拟数据如下:

itemList:[{title:'老爸生日',type:'1',remaindays:'325',theday:'2021.01.25'},
	  {title:'老妈生日',type:'1',remaindays:'304',theday:'2021.01.04'},
	  {title:'结婚纪念日',type:'2',remaindays:'31',theday:'2020.04.06'}
         ]

然后需要用一个swiper来展示一下,swiper标签下需要遍历这个itemList来增加三个swiper-item标签

写法如下:

<swiper class="myswipper" :vertical="vertical" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				 :duration="duration"  >	
	<swiper-item v-for="(item,index) in itemList" :key="index">
			<view class="swiper-item uni-bg-blue ">
					<view class="item text-xl"><icon class="cuIcon-notice"></icon><text>{{item.title}}</text></view>
					<view class="item text-xl"><icon class="cuIcon-time"></icon>还剩</view>
					<view class="item text-xxl"><text class="underline">{{item.remaindays}}</text>天</view>
					<view class="item text-xs"><text>{{item.theday}}</text></view>
			</view>
	</swiper-item>
					
</swiper>

这里主要是v-for的用法,要用在需要循环的这个标签上,我原来以为要用到父标签swiper上,结果只显示第一个项目。

这样通过v-for就可以实现swiper的数据绑定了,下面要通过dcloud的云开发功能来学习下云函数,云数据库如何用,拭目以待。

更新时间 2020-03-06

有话要说...