用vue一個計算屬性，實現一個常見表單交互效果

dongxiawu 發布于2019-08-20 17:26 / 2079人閱讀

摘要：前言是現在用的非常火熱的一個前端框架，表單又是網站基本不會缺少的一環。畢竟不可能直接發送請求，讓后端判斷，再返回成功與否嘛但是現在如果是用的話，實現這個效果會很簡單，效果也會比使用或者原生操作要好。

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增加一個屬性一個編程語言的屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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