1.媒介

vue.js是如今用的异常炽热的一个前端框架，表单又是网站基本不会缺乏的一环。用vue操纵表单。表单的操纵体式格局也是多种多样。本日我说的，就是我项目那边做的这一种操纵。

如上图，用户进入这个页面，然则必填的信息没有填的话，则按钮不能点击。这个之前照样用jquery的时刻，就是经由历程用户每一次完成输入（文本框落空核心）举行一次推断，假如必填的填完了，就能够让用户点击，不然就不能点击。毕竟不可能直接发送要求，让后端推断，再返回胜利与否嘛！
然则如今假如是用vue的话，完成这个结果会很简朴，结果也会比运用jquery或许原生JavaScript操纵Dom要好。怎么做呢，下面说！

2.完成历程

页面就是想上面那样，谁人页面的排版和项目的搭建我就不多说了。直接进入正题！
页面的html代码就是如许

看到页面，我们晓得，会有这几个data数据(用户名，用户电话和公司名称)，下面产物那一块，

这一块肯定是动态的，比方，点击了增添按钮，就增添一行的需求

点击，就少一行需求

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

末了就是盘算属性了，这个相称的简朴，就是推断，data内里的那几个数据是不是为空罢了。productList推断就是轻微庞杂一点罢了，不过也就是productList长度也不能为空，就是最少要增加一条数据。然后遍历数组的每一项，推断每一项的proName和num是不是为空罢了。写法就如下面。（ps:遍历的时刻，用迭代要领会更好，只是我当时做项目的时刻还没有写迭代要领的习气，照样用for占多数，迭代要领的写法，能够参考我之前发的文章–迭代要领）

如许写，直接完成了一个快速功用，比方下面这里填完了，就能够提交了

然则，假如用户又想增添一个产物呢！这下按钮就是主动变成不可点击的状况，

假如删除了新增加的一行产物就又能够点击了！

假如是之前用原生js或许jquery写的话，就比较麻烦了。末了，点击增添和删除一行产物这个的完成就不多说了，不过就是一个对productList的unshift和splice的操纵。
本日这个是很简朴的一个运用，愿望这个能帮到人人，我也是愿望人人扩大设想下运用的场景，把开辟技能和程度都提拔一个品级。

3.后续

关于vue的写作技能另有许多，本日这个只是比较简朴，比较基本的一个。今后有发明的话，会继承分享给人人，别的假如以为我那里有改良的处所，迎接指出！