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

dongxiawu 發(fā)布于2019-08-20 17:26 / 2088人閱讀

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

1.前言

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

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

2.實(shí)現(xiàn)過程

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

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

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

點(diǎn)擊，就少一行需求

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

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

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

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

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

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

3.后續(xù)

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