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的云开发功能来学习下云函数，云数据库如何用，拭目以待。