Vue動(dòng)態(tài)控制input的disabled屬性的方法
有時(shí)候會(huì)有這樣的需求，新增的時(shí)候可以輸入，但是無(wú)法修改，此時(shí)就需要通過(guò)控制input標(biāo)簽的disabled屬性來(lái)實(shí)現(xiàn)，那vue是如何動(dòng)態(tài)設(shè)置input輸入框的disabled屬性的呢？
輸入框的html源代碼
<el-input v-model="dataForm.name" placeholder="配置項(xiàng)" v-bind:disabled="dataForm.id"></el-input>
新增~
通過(guò)F12查看實(shí)際頁(yè)面渲染代碼
修改~
通過(guò)F12查看實(shí)際頁(yè)面渲染代碼
主要是通過(guò) v-bind:disabled 綁定 dataForm.id 的值來(lái)動(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，輸入框也就無(wú)法修改
雖然說(shuō)這樣是有效的，但是只是頁(yè)面的一個(gè)障眼法，如果去掉這個(gè) disabled 屬性，還是可以更改值的，關(guān)鍵是看后端業(yè)務(wù)邏輯如何處理，一種方法是前端頁(yè)面針對(duì)修改操作時(shí)，不傳 配置項(xiàng) 的值，另一種方法是前端傳值，但是后端不進(jìn)行處理
總結(jié)
以上所述是小編給大家介紹的Vue動(dòng)態(tài)控制input的disabled屬性，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue項(xiàng)目設(shè)置活性字體過(guò)程(自適應(yīng)字體大小)
這篇文章主要介紹了vue項(xiàng)目設(shè)置活性字體過(guò)程(自適應(yīng)字體大小)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vuex-Persist 是一個(gè)用于在 Vuex 中實(shí)現(xiàn)持久化狀態(tài)的庫(kù),它可以用來(lái)解決應(yīng)用程序在刷新瀏覽器或關(guān)閉頁(yè)面后丟失 Vuex store 中狀態(tài)的問(wèn)題,本文給大家介紹vuex-persist 可以用來(lái)干什么,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了vue如何使用bable將es6轉(zhuǎn)譯為es5問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
基于腳手架創(chuàng)建Vue項(xiàng)目實(shí)現(xiàn)步驟詳解
這篇文章主要介紹了基于腳手架創(chuàng)建Vue項(xiàng)目實(shí)現(xiàn)步驟詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
詳解vuelidate 對(duì)于vueJs2.0的驗(yàn)證解決方案
本篇文章主要介紹了vuelidate 對(duì)于vueJs2.0的驗(yàn)證解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
SpringBoot+Vue項(xiàng)目線上買菜系統(tǒng)源碼展示
本線上買菜系統(tǒng)采用的數(shù)據(jù)庫(kù)是Mysql，使用springboot框架開發(fā)。在設(shè)計(jì)過(guò)程中，充分保證了系統(tǒng)代碼的良好可讀性、實(shí)用性、易擴(kuò)展性、通用性、便于后期維護(hù)、操作方便以及頁(yè)面簡(jiǎn)潔等特點(diǎn),需要的朋友可以參考下2022-08-08
Vue實(shí)現(xiàn)圖片輪播組件思路及實(shí)例解析
這篇文章主要介紹了Vue實(shí)現(xiàn)圖片輪播組件思路及實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了Vue.js 中的實(shí)用工具方法，本文是小編日常開發(fā)中常用的一些工具方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
在vue中最常用的應(yīng)該就是axios了，這是一個(gè)很強(qiáng)大的處理ajax的庫(kù)。今天我就分享一下我是如何封裝axios的。axios的基本api不再贅述，提前安裝一下也不用我說(shuō)了吧2021-06-06
VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀
這篇文章主要介紹了VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08