用vue一个计算属性,实现一个常见表单交互效果

1.前言

vue.js是现在用的非常火热的一个前端框架,表单又是网站基本不会缺少的一环。用vue操作表单。表单的操作方式也是多种多样。今天我说的,就是我项目那里做的这一种操作。

如上图,用户进入这个页面,但是必填的信息没有填的话,则按钮不能点击。这个之前还是用jquery的时候,就是通过用户每一次完成输入(文本框失去焦点)进行一次判断,如果必填的填完了,就可以让用户点击,否则就不能点击。毕竟不可能直接发送请求,让后端判断,再返回成功与否嘛! 但是现在如果是用vue的话,实现这个效果会很简单,效果也会比使用jquery或者原生JavaScript操作Dom要好。怎么做呢,下面说!

2.实现过程

页面就是想上面那样,那个页面的排版和项目的搭建我就不多说了。直接进入正题! 页面的html代码就是这样

看到页面,我们知道,会有这几个data数据(用户名,用户电话和公司名称),下面产品那一块,

这一块肯定是动态的,比如,点击了增加按钮,就增加一行的需求

点击

,就少一行需求

每一行产品都有一个产品名称和数量,又是动态的,那么这么产品这个数据,就肯定是一个对象数组,那么data数据就如下面这样! 如下图,数据就弄好了!(用户名-userName,用户电话-userPhone,公司名称-corpName,产品-productList,里面的proName就是产品名称,num对应产品数量)

最后就是计算属性了,这个相当的简单,就是判断,data里面的那几个数据是否为空而已。productList判断就是稍微复杂一点而已,不过也就是productList长度也不能为空,就是至少要添加一条数据。然后遍历数组的每一项,判断每一项的proNamenum是否为空而已。写法就如下面。(ps:遍历的时候,用迭代方法会更好,只是我当时做项目的时候还没有写迭代方法的习惯,还是用for居多,迭代方法的写法,可以参考我之前发的文章-迭代方法

这样写,直接完成了一个快捷功能,比如下面这里填完了,就可以提交了

但是,如果用户又想增加一个产品呢!这下按钮就是主动变成不可点击的状态,

如果删除了新添加的一行产品就又可以点击了!

如果是以前用原生js或者jquery写的话,就比较麻烦了。最后,点击增加和删除一行产品这个的实现就不多说了,无非就是一个对productListunshiftsplice的操作。 今天这个是很简单的一个应用,希望这个能帮到大家,我也是希望大家扩展想象下应用的场景,把开发技巧和水平都提升一个等级。

3.后续

关于vue的写作技巧还有很多,今天这个只是比较简单,比较基础的一个。以后有发现的话,会继续分享给大家,另外如果觉得我哪里有改善的地方,欢迎指出!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

如何搭建高质量、高效率的前端工程体系--页面结构继承

本文作者:IMWeb 莫卓颖 原文出处:IMWeb社区 未经同意,禁止转载 {{tags: 工具建设 开发模式}} 序言 相信很多程序员都会经历两件...

23280
来自专栏Java架构

必看!多年架构师告诉你为什么要学JVM?

31940
来自专栏文大师的新世界

3. react-redux

react-redux是reactjs官方推荐的state管理器。具体的定义我就不说了,因为有很多地方比我说的好,大家可以Google或参照:redux、中文文...

28320
来自专栏令仔很忙

Web前端----Javascript模块化

一提到模块化,也许我们首先想到的是做项目的时候进行模块设计,按照功能划分不同的模块,最后通过模块的选择和组合组成最终的产品;那把模块化的思想放到前端页面,js...

21310
来自专栏花叔的专栏

这是一个聚集了各路大神思路的小程序

楼主是个热衷技术的小伙伴,偶尔会做一下小玩意,今天给大家说说我做的第一个小程序 该小程序名字叫Nodes,顾名思义就是Node(节点)的聚合,就是思维的集合,首...

39860
来自专栏程序员互动联盟

【答疑解惑第十二讲】windows编程学习框架图

存在问题: 桌面系统windows为王,windows编程大有可为。 解决方案: 大家知道现在PC市场上,Windows、Linux、Mac基本占了百分之九十多...

32660
来自专栏云飞学编程

Python大牛给写的爬虫学习路线,分享给大家看看!

我们学习python的最终目的是要用它来达到我们的目的,它本身是作为工具的存在,我们一定要掌握自己的工具的各类设置,比如安装、环境配置、库的安装,编辑器的设置等...

9920
来自专栏Linyb极客之路

Redis作者谈如何编写系统软件的代码注释

顶顶大名的Redis作者谈如何在Redis这样系统软件上进行代码文档注释,以下是九种注释类型的大意说明: 很长一段时间以来,我一直想在YouTube上发布一段...

19560
来自专栏coding for love

JS常用设计模式解析

我想作为一个前端开发者,前期大多数只会关注代码的功能性。但是随着编程经验的增加,维护更大更复杂的代码模块,需要的就不仅仅只是代码功能性的实现,还需要关注代码的复...

13530
来自专栏web前端教室

第二节,Vuex生成Store并映射数据到view视图层

(1)通过辅助函数mapGetters,从vuex的getters中获得state里面的数据,

13420

扫码关注云+社区

领取腾讯云代金券