uniapp 表单页面_uniapp自定义表单模板经验分享

极简属性:data

(仅提供方法和极简示例,实践党可自行扩展,伸手党请绕行)

表单组件通用

注:此data是组件的一个隐藏属性

示例:

template:

{{sexs[grouplist.sexIndex].name}}

data:

sexs: [{name: "男"},{name: "女"}],

grouplist: {

name:'',

sexIndex:0

}

method:

inputInfo(e) {

let type = e.target.dataset.type // e.target.dataset.type中的type就是data-type中的参数

this.grouplist[type] = e.target.value // 给对象参数动态赋值

}

只需要这一个方法即可取代之前很多重复性的赋值工作,复用性极高

你可以叫 data-type 也可以起一个自己喜欢的 data-man 等等

缺点:这种template写法需要预置很多重复性的模板组件

解决思路:用 v-for 对 data-type 进行动态赋值,每个组件预置一次动态取用即可,但内部模板组件取用条件需自行书写判断逻辑。

有兴趣的道友还可以自行扩展。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

毕业就业推荐表计算机,毕业生就业推荐表

一份好的就业推荐表自我鉴定,能让你在求职过程中加分不少,所以同学们要重视起就业推荐表自我鉴定的作用。下面是由出国留学网小编为大家整理的“2020高校毕业生就业推荐表自我鉴定”,仅供参考,欢迎大家阅读。2020高校毕业生就业推…

etal斜体吗 参考文献_参考文献的标准格式

2.文后参考文献编排格式(1)专著、论文集、学位论文、报告[序号]作者.文献题名[文献类型标识].出版地:出版者.出版年,起止页码(任选).范例:[1]杨浩滨.食品微生物学[M].北京:北京农业大学出版社,1…

70进货卖100利润是多少_一只周黑鸭随便就卖100多,那成本有多少?说出来你可能不信...

一只周黑鸭动不动就卖100多,那成本有多少?说出来你可能不信。如果你吃过周黑鸭,不知道每次想起的时候,尤其是午夜时分会不会有流口水的感觉,那种麻辣的口感,再搭配上冰凉爽口的啤酒,发自心底的那…

计算机网络实验报告访问控制列表,电子政务《计算机网络实验》期末报告 07-访问控制列表实验报告.doc...

文档介绍:计算机网络实验报告 1. 实验报告如有雷同,雷同各方当次实验成绩均以 0 分计。 2. 当次小组成员成绩只计学号、姓名登录在下表中的。 3. 在规定时间内未上交实验报告的, 不得以其他方式补交, 当次成绩按 0 分计。 4. 实验报告文件以 PDF 格式提交。【实验题…

powerquery加载pdf_pdf转换为excel,你不会,同事点点鼠标2分钟就搞定了

Hello.大家好,最近office365进行了一次小的更新,这次更新在excel中添加了获取pdf文件中的表格的功能,操作起来十分的简单,下面就跟大家分享下它是如何操作的首先我们新建一个excel文件,然后点击数据功能组,…

防火墙设置导致服务器站点打开,服务器、网站、环境配置全正常网站打不开原来是系统防火墙造成的...

大家都知道网站是架在服务器上的,通过域名解析指向网站并在服务器上绑定域名,上传网站程序到指定的目录,并只要有适合网站运行的环境,网站目录权限正常网站就肯定可以正常运行了,但今天我们技术遇到了一个问题以上所说…

web前端开发技术期末考试_智慧树来我校开展WEB前端开发微专业导学

11月17日,在6号教学楼6102阶梯教室,智慧树工作人员带来了WEB前端开发微专业导学。根据前期长青联盟微专业的报名情况及学生学习情况,为进一步提高学生学习微专业的质量,学院联系了微专业教学平台的专家对教学平台的使用进行技术指…

计算机辅助设计还需要手绘吗,西安电脑如此发达为什么还要学习手绘

在处理器以八核成为主流、硬盘以T而论的今天,计算机辅助设计软件是设计师的得力工具。用铅笔、尺子要时间才能画好的一个室内空间平面布置图,如果用CAD可能一个小时都不用就完成了,而且很方便修改,可见在效率方面,电脑…

一键生成通讯录的软件_橙瓜码字自动写作软件,外貌描写对话描写一键生成

很多写手对于以古代为背景的小说,偶尔都会对某些地方感到棘手,有时候是历史的背景,有时候是当时的官制、称呼,或是一些特有的服饰,外貌的描写,而面对难题,很多时候我们也是选择上网查询&#xf…

gin 静态文件服务器拒绝,nginx实现简单的图片服务器(windows)+静态文件服务器-Go语言中文社区...

需求:能够使用 http://localhost/目录/图片名 访问本地(服务器)已经存在的图片首先需要在本地将nginx跑起来,这里使用默认端口80;在浏览器使用http://localhost看到下面的界面证明nginx启动正常。下面需要修改nginx.conf来实现直接使用http:/…

wegame每次登陆都要滑动验证_Vue项目中实现用户登录及token验证

在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个toke…

云服务器 性能监控软件,云监控 - 云应用监控 - ManageEngine Applications Manager

云监控什么是云监控?尽管许多组织仍然依赖于在自托管的数据中心中存储数据的本地方法,但在业务组织中采用云服务的情况已经逐渐增多。自然,这导致了一些云监控工具的出现。无论您使用的是公共、私有还是混合环境,对应用程序性能具有端到端可…

mysql导入dat文件_MySql导入和抽取大数量级文件数据

一、情况介绍需要处理的文件是一个3.41G的csv格式文件,现在需要把它导入数据库,进行后续处理和分析。二、导入数据该文件数据量庞大,无法用excel或者editplus之类普通软件打开,于是借用了pandas的方法查看了表的结构:方…

服务器操作系统与安装步骤,服务器操作系统与安装步骤

服务器操作系统与安装步骤 内容精选换一换如果在创建弹性云服务器时未设置密码,或密码丢失、过期,可以参见本节操作重置密码。密码丢失或过期前,已安装密码重置插件。公共镜像创建的弹性云服务器默认已安装一键重置密码插件。私有镜像创建的云…

python jsonpath-rw_Python使用jsonpath-rw模块处理Json对象操作示例

本文实例讲述了Python使用jsonpath-rw模块处理Json对象操作。分享给大家供大家参考,具体如下:这两天在写一个爬虫,需要从网站返回的json数据提取一些有用的数据。向url发起请求,返回的是response,在python3中&#xff…

文件服务器mfs,分布式文件系统MFS(moosefs)实现存储共享

这种架构除了性能问题而外,还存在单点故障,一旦这个NFS服务器发生故障,所有靠共享提供数据的应用就不再可用,尽管用rsync方式同步数据到另外一个服务器上做nfs服务的备份,但这对提高整个系统的性能毫无帮助。基于这样一…

as mysql with 嵌套_MySQL_MySQL的嵌套查询,MySQl从4.11版后已经完全支持嵌 - phpStudy

MySQL的嵌套查询MySQl从4.11版后已经完全支持嵌套查询了,那么下面举些简单的嵌套查询的例子吧(源程序来自MySQL User Manual):1. SELECT语句的子查询语法: SELECT ... FROM (subquery) AS name ...先创建一个表:CREATE TABLE t1 (s1 INT, s2 CHAR(5)…

mysql 1215_mysql执行带外键的sql文件时出现mysql ERROR 1215 (HY000): Cannot add foreign key constraint的解决...

ERROR 1215 (HY000): Cannot add foreign key constraint最近在建表时遇到了这个错误,然后找了下找到了解决办法,记录下:本来是要建两张表:出现下面的提示:然后开始上网查,有的说是用的引擎不同的原因&…

mysql里面可以用正则吗_Mysql中使用正则表达式

最近在《MYSQL必知必会》这本书中读到在SQL中使用正则表达式,以前是学过数据库也学过正则表达式,但是不知道原来他们可以一起使用,这里做下记录。首先是Mysql使用正则表达式的语法:SELECT ... FROM ... WHERE ... REGEXP ...(这…

mysql数据库的备份和恢复的常用方法_MySQL数据库备份与恢复方法(转)

常有新手问我该怎么备份数据库,下面介绍3种备份数据库的方法:MySQL中的每一个数据库和数据表分别对应文件系统中的目录和其下的文件。在Linux下数据库文件的存放目录一般为/var/lib/mysql。在Windows下这个目录视MySQL的安装路径而定,DiaHost…