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

dongxiawu 发布于2019-08-20 17:26 / 2083人阅读

摘要：前言是现在用的非常火热的一个前端框架，表单又是网站基本不会缺少的一环。毕竟不可能直接发送请求，让后端判断，再返回成功与否嘛但是现在如果是用的话，实现这个效果会很简单，效果也会比使用或者原生操作要好。

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的写作技巧还有很多，今天这个只是比较简单，比较基础的一个。以后有发现的话，会继续分享给大家，另外如果觉得我哪里有改善的地方，欢迎指出！

云服务器 GPU云服务器用java实现一个线程池 vue的计算属性 java增加一个属性一个编程语言的属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83576.html

当大多数人对Vue理解到炉火纯青的时候，是不是该思考一下怎么让vue页面骚气起来

写在前面当大多数人Vue理解的炉火纯青的时候，你应该思考怎么让vue页面骚气起来，下面就我个人在接触Vue两年的时间里，在实际工作中门户网站在前端页面交互应用和技巧，炒几道小菜给大家分享一哈，我把它封装成一个项目vue-portal-webUI（github源码），不敢说是UI，但也是各种常见常遇到的情景吧，看懂代码需要一些vue、axios、es6、scss基础、数据基本上是mock，功能和场...

lingdududu 2019-08-26 12:12 评论0 收藏0
前端中台系统常见问题剖析与解决方案

摘要：它每一行代码都凝结着我从深坑中跳出来之后的思考，是下文介绍了所有问题和场景的解决方案。在版本推出了新的，这也是所官方推荐的一种跨传递数据的解决方案。干货高能预警，此文章信息量巨大，大部分内容为对现状问题的思考和现有技术的论证。感兴趣的朋友可以先收藏，然后慢慢研读。此文凝结了我在中台领域所有的思考和探索，相信读完此文，能够让你对中台领域的常见业务场景和解决方法有着全新的认知。此文转载请...

Aklman 2019-05-23 17:28 评论0 收藏0
Vue面试中，经常会被问到的面试题/知识点(2019改进版)

摘要：在第一版的基础上进行了优化，新增一些面试题知识点，对一些知识点进行更加深入的描述。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。改变中的状态的唯一途径就是显式地提交。这两个可以在不进行刷新的情况下，操作浏览器的历史纪录。在第一版的基础上进行了优化，新增一些面试题/知识点，对一些知识点进行更加深入的描述。一、对于MVVM的理解？ MVVM 是 Model-View-Vie...

singerye 2019-08-26 11:00 评论0 收藏0
css進階

摘要：栅格系统用于处理页面多终端适配的问题。它表示抓取对象以后拖放到另一个位置。目前，它是标准的一部分。精简高效的命名准则方法这篇文章发布于年月日，星期日，，归类于相关。但是不会受到包含块的限制，可能会溢出。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由...

import. 2019-08-29 14:07 评论0 收藏0
前端开发知识点整理

摘要：前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理，涵盖前端理论与前端实践两方面。前言：本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理，涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么，看上去有很多，但具体你要学什么，还是要 follow your heart & follow your BOSS。初衷...

Blackjun 2019-08-20 17:14 评论0 收藏0