成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

用vue一個計算屬性，實現(xiàn)一個常見表單交互效果

dongxiawu / 2138人閱讀

摘要：前言是現(xiàn)在用的非?；馃岬囊粋€前端框架，表單又是網(wǎng)站基本不會缺少的一環(huán)。畢竟不可能直接發(fā)送請求，讓后端判斷，再返回成功與否嘛但是現(xiàn)在如果是用的話，實現(xiàn)這個效果會很簡單，效果也會比使用或者原生操作要好。

1.前言

vue.js是現(xiàn)在用的非?；馃岬囊粋€前端框架，表單又是網(wǎng)站基本不會缺少的一環(huán)。用vue操作表單。表單的操作方式也是多種多樣。今天我說的，就是我項目那里做的這一種操作。

如上圖，用戶進(jìn)入這個頁面，但是必填的信息沒有填的話，則按鈕不能點擊。這個之前還是用jquery的時候，就是通過用戶每一次完成輸入（文本框失去焦點）進(jìn)行一次判斷，如果必填的填完了，就可以讓用戶點擊，否則就不能點擊。畢竟不可能直接發(fā)送請求，讓后端判斷，再返回成功與否嘛！
但是現(xiàn)在如果是用vue的話，實現(xiàn)這個效果會很簡單，效果也會比使用jquery或者原生JavaScript操作Dom要好。怎么做呢，下面說！

2.實現(xiàn)過程

頁面就是想上面那樣，那個頁面的排版和項目的搭建我就不多說了。直接進(jìn)入正題！
頁面的html代碼就是這樣


看到頁面，我們知道，會有這幾個data數(shù)據(jù)(用戶名，用戶電話和公司名稱)，下面產(chǎn)品那一塊，

這一塊肯定是動態(tài)的，比如，點擊了增加按鈕，就增加一行的需求

點擊，就少一行需求

每一行產(chǎn)品都有一個產(chǎn)品名稱和數(shù)量，又是動態(tài)的，那么這么產(chǎn)品這個數(shù)據(jù)，就肯定是一個對象數(shù)組，那么data數(shù)據(jù)就如下面這樣！
如下圖，數(shù)據(jù)就弄好了！(用戶名-userName，用戶電話-userPhone,公司名稱-corpName,產(chǎn)品-productList,里面的proName就是產(chǎn)品名稱，num對應(yīng)產(chǎn)品數(shù)量)

最后就是計算屬性了，這個相當(dāng)?shù)暮唵?，就是判斷?b>data里面的那幾個數(shù)據(jù)是否為空而已。productList判斷就是稍微復(fù)雜一點而已，不過也就是productList長度也不能為空，就是至少要添加一條數(shù)據(jù)。然后遍歷數(shù)組的每一項，判斷每一項的proName和num是否為空而已。寫法就如下面。（ps:遍歷的時候，用迭代方法會更好，只是我當(dāng)時做項目的時候還沒有寫迭代方法的習(xí)慣，還是用for居多，迭代方法的寫法，可以參考我之前發(fā)的文章-迭代方法）


這樣寫，直接完成了一個快捷功能，比如下面這里填完了，就可以提交了

但是，如果用戶又想增加一個產(chǎn)品呢！這下按鈕就是主動變成不可點擊的狀態(tài)，

如果刪除了新添加的一行產(chǎn)品就又可以點擊了！

如果是以前用原生js或者jquery寫的話，就比較麻煩了。最后，點擊增加和刪除一行產(chǎn)品這個的實現(xiàn)就不多說了，無非就是一個對productList的unshift和splice的操作。
今天這個是很簡單的一個應(yīng)用，希望這個能幫到大家，我也是希望大家擴(kuò)展想象下應(yīng)用的場景，把開發(fā)技巧和水平都提升一個等級。

3.后續(xù)

關(guān)于vue的寫作技巧還有很多，今天這個只是比較簡單，比較基礎(chǔ)的一個。以后有發(fā)現(xiàn)的話，會繼續(xù)分享給大家，另外如果覺得我哪里有改善的地方，歡迎指出！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83576.html

相關(guān)文章

  • 當(dāng)大多數(shù)人對Vue理解到爐火純青的時候，是不是該思考一下怎么讓vue頁面騷氣起來

    寫在前面 當(dāng)大多數(shù)人Vue理解的爐火純青的時候，你應(yīng)該思考怎么讓vue頁面騷氣起來，下面就我個人在接觸Vue兩年的時間里，在實際工作中門戶網(wǎng)站在前端頁面交互應(yīng)用和技巧，炒幾道小菜給大家分享一哈，我把它封裝成一個項目vue-portal-webUI（github源碼），不敢說是UI，但也是各種常見常遇到的情景吧，看懂代碼需要一些vue、axios、es6、scss基礎(chǔ)、數(shù)據(jù)基本上是mock，功能和場...

    lingdududu 評論0 收藏0

  • 前端中臺系統(tǒng)常見問題剖析與解決方案

    摘要：它每一行代碼都凝結(jié)著我從深坑中跳出來之后的思考，是下文介紹了所有問題和場景的解決方案。在版本推出了新的，這也是所官方推薦的一種跨傳遞數(shù)據(jù)的解決方案。 干貨高能預(yù)警，此文章信息量巨大，大部分內(nèi)容為對現(xiàn)狀問題的思考和現(xiàn)有技術(shù)的論證。 感興趣的朋友可以先收藏，然后慢慢研讀。此文凝結(jié)了我在中臺領(lǐng)域所有的思考和探索，相信讀完此文，能夠讓你對中臺領(lǐng)域的常見業(yè)務(wù)場景和解決方法有著全新的認(rèn)知。 此文轉(zhuǎn)載請...

    Aklman 評論0 收藏0

  • Vue面試中，經(jīng)常會被問到的面試題/知識點(2019改進(jìn)版)

    摘要：在第一版的基礎(chǔ)上進(jìn)行了優(yōu)化，新增一些面試題知識點，對一些知識點進(jìn)行更加深入的描述?？梢栽谠撱^子中進(jìn)一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程。改變中的狀態(tài)的唯一途徑就是顯式地提交。這兩個可以在不進(jìn)行刷新的情況下，操作瀏覽器的歷史紀(jì)錄。 在第一版的基礎(chǔ)上進(jìn)行了優(yōu)化，新增一些面試題/知識點，對一些知識點進(jìn)行更加深入的描述。 一、對于MVVM的理解？ MVVM 是 Model-View-Vie...

    singerye 評論0 收藏0

  • css進(jìn)階

    摘要：柵格系統(tǒng)用于處理頁面多終端適配的問題。它表示抓取對象以后拖放到另一個位置。目前，它是標(biāo)準(zhǔn)的一部分。精簡高效的命名準(zhǔn)則方法這篇文章發(fā)布于年月日，星期日，，歸類于相關(guān)。但是不會受到包含塊的限制，可能會溢出。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 float 屬性不由...

    import. 評論0 收藏0

  • 前端開發(fā)知識點整理

    摘要：前言本文主要是有關(guān)前端方面知識按照目前的認(rèn)知進(jìn)行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。 前言：本文主要是有關(guān)前端方面知識按照 XX 目前的認(rèn)知進(jìn)行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...

    Blackjun 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<