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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/323162.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【学习资源】分享三个文献互助平台(科研通 / 谷粉 / 纬度)

最近博主准备阅读一些专业相关的文献&#xff0c;有一些可以从博主所在单位购买的数据中直接下载&#xff0c;然而有一些论文数据库是没有购买的&#xff0c;所以要博主自己想办法去下载。 一般来说&#xff0c;两年以前的SCI论文&#xff0c;基本上都可以借助Scihub下载的到&…

pc端微信QQ使用代理解决方案

背景 多数金融类公司都会限制QQ和微信访问&#xff0c;但某些情况导致不得不使用&#xff0c;时不时使用手机会让你的老板感觉你在摸鱼&#xff0c;所以站在技术的角度上研究一下如果在pc端使用 代理开启 以微信举例&#xff0c;如果你用的clash&#xff0c;这里的地址可以设…

2024 解决matplotlib中文字体问题

第一种代码&#xff08;失败代码&#xff09; import matplotlib as mpl import matplotlib.pyplot as plt from matplotlib.font_manager import FontPropertiesfont_path /Users/huangbaixi/Desktop/SimHei.ttfdef plot_demo():#print(mpl.get_cachedir())# 绘制折线图font…

人脸考勤技术,这个隐藏功能太好用了!

随着科技的不断发展&#xff0c;人脸识别技术在各个领域得到了广泛的应用。其中&#xff0c;三维人脸考勤系统作为一种高级的人脸识别技术&#xff0c;不仅提高了考勤系统的准确性&#xff0c;还增强了安全性。 客户案例 制造企业 山东某大型制造企业引入了泛地缘科技推出的三…

【excel密码】Excel中如何使部分单元格区域实现加密

Excel文件可以设置保护工作表&#xff0c;那么可以只保护工作表中的部分单元格&#xff0c;其他地方可以正常编辑吗&#xff1f;当然是可以的&#xff0c;今天我们学习&#xff0c;如何设置保护部分单元格。 首先&#xff0c;我们先将整张工作表选中&#xff08;Ctrl A&#…

【KMP】【二分查找】【C++算法】100207. 找出数组中的美丽下标 II

作者推荐 【矩阵快速幂】封装类及测试用例及样例 本文涉及的基础知识点 二分查找算法合集 LeetCode100207. 找出数组中的美丽下标 II 给你一个下标从 0 开始的字符串 s 、字符串 a 、字符串 b 和一个整数 k 。 如果下标 i 满足以下条件&#xff0c;则认为它是一个 美丽下标…

主流浏览器设置代理IP之QQ浏览器

给浏览器设置代理IP是目前代理IP的主流使用场景之一&#xff0c;接下来小编就手把手教你如何对QQ浏览器进行代理IP设置 注&#xff1a;本次使用IP来源于携趣代理平台QQ浏览器内设置IP代理 1、首先需要进入浏览器【设置】 2.点击【工具】选择【lnternet选项】然后进行点击。 3.…

零基础精酿啤酒,这款智能啤酒酿造机掀起啤酒消费的DIY热潮

破壁机、台式单烤、空气炸锅……回顾2023年&#xff0c;小家电行业在高端、智能等趋势下迎来了新一轮的消费迭代热潮&#xff0c;越来越多契合消费者细分需求的“新兴家电”正在成为市场新宠。比如&#xff0c;此前很少有消费者会关注的啤酒酿造机。 啤酒如何酿造&#xff1f;…

Unity ComputeShader 使用GPU快速计算复杂问题

Unity ComputeShader 使用GPU快速计算复杂问题 前言项目创建ComputeShader编写CompturShader创建Unity代码场景布置运行场景 参考 前言 遇到一个问题&#xff0c;需要大量的计算&#xff0c;在Unity中直接写会长时间的阻塞主线程&#xff0c;正好使用ComputeShader让GPU来帮我…

Windows 下 QT开发环境的搭建:

下载QT:Index of /archive/qt/5.14 下载Cmake :CMake - Upgrade Your Software Build System (1)QT在windows,C, 打包exe&#xff1a; step1:window上安装QT软件&#xff1a; Windows下的QT系统开发环境搭建_qt windows-CSDN博客. step2:新建一个界面工程&#xff1a; (1)打…

C++标准学习--智能指针

shared_ptr和weak_ptr的配合使用是个问题。unique_ptr的使用场合似乎比较局限。 文章C 智能指针详解&#xff08;一&#xff09;——unique_ptr - 知乎 (zhihu.com) 介绍了unique_ptr的使用。它可以由shared_ptr转来&#xff0c;主要用到了std::move。 主要场景其中提到&#…

WaitForSingleObject 函数的诸多用途与使用场景总结

目录 1、WaitForSingleObject函数详细说明 2、在线程函数中调用WaitForSingleObject实现Sleep&#xff0c;可立即退出Sleep状态 3、调用WaitForSingleObject函数监测线程或进程是否已经退出 3.1、子进程实时监测主进程是否已经退出&#xff0c;主进程退出了&#xff0c;则子…

第一个Python程序_获取网页 HTML 信息[Python爬虫学习笔记]

使用 Python 内置的 urllib 库获取网页的 html 信息。注意&#xff0c;urllib 库属于 Python 的标准库模块&#xff0c;无须单独安装&#xff0c;它是 Python 爬虫的常用模块。 获取网页 HTML 信息 1) 获取响应对象 向百度&#xff08;http://www.baidu.com/&#xff09;发起…

UML-用例图

提示&#xff1a;用例图是软件建模的开始&#xff0c;软件建模中的其他图形都将以用例图为依据。用例图列举了系统所需要实现的所有功能&#xff0c;除了用于软件开发的需求分析阶段&#xff0c;也可用于软件的系统测试阶段。 UML-用例图 一、用例图的基础知识1.用例图的构成元…

网页屏幕适配通透了

一&#xff0c;如果设计尺寸固定 那就按照固定尺寸开发 一般都是1920*1080 二&#xff0c;需要适配多种像素屏幕&#xff08;大屏可视化&#xff09; 可使用媒体查询设置多套css样式或者使用自适应单位&#xff0c;%&#xff0c;vw&#xff0c;vh 最好解决方案rem&#xff…

NetCore部署微服务(三)

接上文&#xff0c;服务端部署完成之后&#xff0c;同样我们也需要修改一下客户端代码 Blocking Queries 1.1 服务发现 在客户端代码中使用Nuget安装consul包 修改配置文件&#xff0c;我们首先需要把consul的请求地址配置在配置文件中 修改control方法 using Consul; usin…

Navicat教程

下载连接&#xff08;无限使用版&#xff09; 链接&#xff1a;https://pan.baidu.com/s/1IprYLRv0bSnW-XKn0trRtw 提取码&#xff1a;j6qx 连接使用 1.1 连接数据库 打开navicat&#xff0c;点击连接&#xff0c;选择数据库 1.2 操作数据库 右键连接&#xff0c;点击新建数…

使用php代码调用jar包里面的类方法的实战操作

#php调用jar包# 需求说明 接到一个需求&#xff0c;网站是使用php开发的帝国cms&#xff0c;现接到需求是需要对接一个系统 &#xff0c;但系统里面有一个数据加密字段&#xff0c;需要使用jar包进行加解密。 技术解决方案&#xff0c;资源包解决一切。下载就行了&#xff0…

偶尔启动Idea2023版开发工具运行没有反应Idea都无法启动Idea双击无反应

最近在开发的过程中使用Idea2023版。无论是双击运行还是管理员运行&#xff0c;Idea都无法启动&#xff0c;没有作出任何反应&#xff0c;在查询许多资料后&#xff0c;这里记录总结一下&#xff1a; 解决方法如下&#xff1a; &#xff08;1&#xff09;找到idea桌面快捷方式…

【REST2SQL】08 日志重构增加输出到文件log.txt

【REST2SQL】01RDB关系型数据库REST初设计 【REST2SQL】02 GO连接Oracle数据库 【REST2SQL】03 GO读取JSON文件 【REST2SQL】04 REST2SQL第一版Oracle版实现 【REST2SQL】05 GO 操作 达梦 数据库 【REST2SQL】06 GO 跨包接口重构代码 【REST2SQL】07 GO 操作 Mysql 数据库 原来…