from表单通过遍历的方式显示

当我们绘制表单数据的时候，有时候知道需要绘制的内容，但是不想在页面一条一条写数据，如果通过遍历显示呢

下面是在uniapp中写h5的方法，直接上代码

	<view>
		<view class='item' v-for='(item,index) in arr' :key='index'>
			<view class='item-left'>{{item.title}}</view>
			<view class='item-riht'>
				<input  :placeholder="'请输入' + item.placeholder" v-model="item.prop" type="text" v-if='item.state==2'/>
				<view  v-if='item.state==3'>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
				<view v-if='item.state==1'>
				<picker @change="bindPickerChange2" :range="array2" :value="index"
								>
								<view class="formation-item-cont" style="width: 100%;text-align:left;">
									<text class="input_cc" v-if='index==2'
										style='font-size:32rpx;color:#c9c9c9;'>请选择患者性别</text>
									<text class="input_cc" v-else>{{array2[index]}}</text>
								</view>
							</picker>
				</view>
			
			</view>
		</view>
	</view>
	<script>
	export default {
		const currentDate = this.getDate({
            format: true
        })
		data() {
			return {
				index: 2,
				array2: ["男", "女"],
				 date: currentDate,
				formData:{},//需要保存之后提交后台的1数据 对象的格式 {date：‘’，fullname:'',...}
				arr:[ //表单数据
						{
							prop: "fullname",
							title: "姓名",
							type: "text",
							placeholder: "姓名",
							state：2,
						
						},
						{
							prop: "gender",
							title: "性别",
							type: "select",
							placeholder: "选择性别",
							state：3,
						},
						{
							prop: "idcard",
							title: "身份证号",
							type: "idcard",
							placeholder: "输入身份证号",
							state：2,
						},
						{
							prop: "mobile",
							title: "手机号",
							type: "mobile",
							placeholder: "手机号",
							state：2,
						},
						{
							prop: "birthdayDate",
							title: "出生年月日",
							type: "birthdayDate",
							placeholder: "1994-08-07",
							state：1,
						},
					]
				}
			},
			computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
   			 },
			methods:{
			//选择时间的下拉框
			bindDateChange: function(e) {
	           arr[4].prop = e.detail.value
       		 },
       		//性别
			bindPickerChange2(e) {
				if (e.detail.value == 1) {
					arr[2].prop=1
					this.formData.gender = 1
					this.index = 1
				} else {
					arr[5].prop=2
					this.index = 0
				}
			},
			//获取处理之后的需要获取的formData表单数据
			  getformData(){
				  	this.formData=arr.map(item=>{
				  		this.formData.item.type=item.prop
					}
					
			 }

			}
	}
	</script>