有時候會有這樣的需求，新增的時候可以輸入，但是無法修改，此時就需要通過控制input標簽的disabled屬性來實現，那vue是如何動態設置input輸入框的disabled屬性的呢？

輸入框的html源代碼

<el-input v-model="dataForm.name" placeholder="配置項" v-bind:disabled="dataForm.id"></el-input>

新增~

通過F12查看實際頁面渲染代碼

修改~

通過F12查看實際頁面渲染代碼

主要是通過 v-bind:disabled 綁定 dataForm.id 的值來動態判斷是否添加 disabled 屬性，而 dataForm.id 的默認初始值為0，新增時不會添加此屬性；當點擊修改時，dataForm.id 的值就是當前所要修改的數據記錄的id，此時id不為0，因此 disabled 屬性值就被設為 disabled，輸入框也就無法修改

雖然說這樣是有效的，但是只是頁面的一個障眼法，如果去掉這個 disabled 屬性，還是可以更改值的，關鍵是看后端業務邏輯如何處理，一種方法是前端頁面針對修改操作時，不傳 配置項 的值，另一種方法是前端傳值，但是后端不進行處理

總結

以上所述是小編給大家介紹的Vue動態控制input的disabled屬性，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！