专栏首页守候书阁用vue一个计算属性,实现一个常见表单交互效果

用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 条评论
登录 后参与评论

相关文章

  • css写作建议和性能优化小结

    还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于cs...

    守候i
  • [探索]怎么样的参数能让 JS - API 更灵活

    开发 API 的时候,把参数的名字和位置确定下来,函数定义就可以说是完成了。因为 API 使用者来说,只需要知道如何传递参数,以及函数将返回什么样的值就够了,无...

    守候i
  • 面试小结--前端面试的几个雷点

    得益于‘金三银四’,在最近一段时间,面试了一些人,但是符合的寥寥无几。对于之前面试的情况,趁着项目开发前,还有一两天的闲余时间,发下牢骚。这些情况,可以说是一些...

    守候i
  • Java并发编程,Condition的await和signal等待通知机制

    Object类是Java中所有类的父类, 在线程间实现通信的往往会应用到Object的几个方法: wait(),wait(long timeout),wait(...

    李红
  • 11.并发包阻塞队列之LinkedBlockingQueue

    jdk1.7.0_79   在上文《10.并发包阻塞队列之ArrayBlockingQueue》中简要解析了ArrayBlockingQueue部分源码,在本...

    用户1148394
  • Java中常用的七个阻塞队列第二篇DelayQueue源码介绍

    通过前面两篇文章,我们对队列有了了解及已经认识了常用阻塞队列中的三个了。本篇我们继续介绍剩下的几个队列。

    凯哥Java
  • [工具]Microsoft To-Do,简约还是简陋?

    微软收购奇妙清单后,由奇妙清单的原班人马打造了一个全新的待办事项应用,就叫“To-Do”(简单粗暴,好像新浪微博直接就叫“微博”的感觉)。这个应该刚推出我就从奇...

    dino.c
  • 消息队列

    一般来说,消息队列是一种异步的服务间通信方式,是分布式系统中重要的组件,主要解决应用耦合,异步消息,流量削锋等问题,实现高性能,高可用,可伸缩和最终一致性架构。

    用户4464623
  • ReentrantLock 与 AQS 源码分析

    ReentrantLock 与 AQS 源码分析 1. 在阅读源码时做了大量的注释,并且做了一些测试分析源码内的执行流程,由于博客篇幅有限,并且代码阅读起来没...

    lwen
  • Python 学习入门(7)—— lambda

    那么,lambda表达式有什么用处呢?很多人提出了质疑,lambda和普通的函数相比,就是省去了函数名称而已,同时这样的匿名函数,又不能共享在别的地方调用。其实...

    阳光岛主

扫码关注云+社区

领取腾讯云代金券