有時(shí)候會(huì)有這樣的需求，新增的時(shí)候可以輸入，但是無法修改，此時(shí)就需要通過控制input標(biāo)簽的disabled屬性來實(shí)現(xiàn)，那vue是如何動(dòng)態(tài)設(shè)置input輸入框的disabled屬性的呢？

創(chuàng)新互聯(lián)主要企業(yè)基礎(chǔ)官網(wǎng)建設(shè)，電商平臺(tái)建設(shè)，移動(dòng)手機(jī)平臺(tái)，重慶小程序開發(fā)等一系列專為中小企業(yè)按需搭建網(wǎng)站產(chǎn)品體系；應(yīng)對(duì)中小企業(yè)在互聯(lián)網(wǎng)運(yùn)營(yíng)的各種問題，為中小企業(yè)在互聯(lián)網(wǎng)的運(yùn)營(yíng)中保駕護(hù)航。

輸入框的html源代碼

新增~

通過F12查看實(shí)際頁面渲染代碼

修改~

通過F12查看實(shí)際頁面渲染代碼

主要是通過 v-bind:disabled 綁定 dataForm.id 的值來動(dòng)態(tài)判斷是否添加 disabled 屬性，而 dataForm.id 的默認(rèn)初始值為0，新增時(shí)不會(huì)添加此屬性；當(dāng)點(diǎn)擊修改時(shí)，dataForm.id 的值就是當(dāng)前所要修改的數(shù)據(jù)記錄的id，此時(shí)id不為0，因此 disabled 屬性值就被設(shè)為 disabled，輸入框也就無法修改

雖然說這樣是有效的，但是只是頁面的一個(gè)障眼法，如果去掉這個(gè) disabled 屬性，還是可以更改值的，關(guān)鍵是看后端業(yè)務(wù)邏輯如何處理，一種方法是前端頁面針對(duì)修改操作時(shí)，不傳 配置項(xiàng) 的值，另一種方法是前端傳值，但是后端不進(jìn)行處理

總結(jié)

以上所述是小編給大家介紹的Vue動(dòng)態(tài)控制input的disabled屬性，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！