Vue動態控制input的disabled屬性

有時候會有這樣的需求，新增的時候能夠輸入，可是沒法修改，此時就須要經過控制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 屬性，仍是能夠更改值的，關鍵是看後端業務邏輯如何處理，一種方法是前端頁面針對修改操做時，不傳 配置項 的值，另外一種方法是前端傳值，可是後端不進行處理