Vue動態(tài)控制input的disabled屬性的方法
更新時間：2018年06月26日 10:31:11 作者：十方
這篇文章主要介紹了Vue動態(tài)控制input的disabled屬性的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
有時候會有這樣的需求，新增的時候可以輸入，但是無法修改，此時就需要通過控制input標(biāo)簽的disabled屬性來實現(xiàn)，那vue是如何動態(tài)設(shè)置input輸入框的disabled屬性的呢？
輸入框的html源代碼
<el-input v-model="dataForm.name" placeholder="配置項" v-bind:disabled="dataForm.id"></el-input>
新增~
通過F12查看實際頁面渲染代碼
修改~
通過F12查看實際頁面渲染代碼
主要是通過 v-bind:disabled 綁定 dataForm.id 的值來動態(tài)判斷是否添加 disabled 屬性，而 dataForm.id 的默認初始值為0，新增時不會添加此屬性；當(dāng)點擊修改時，dataForm.id 的值就是當(dāng)前所要修改的數(shù)據(jù)記錄的id，此時id不為0，因此 disabled 屬性值就被設(shè)為 disabled，輸入框也就無法修改
雖然說這樣是有效的，但是只是頁面的一個障眼法，如果去掉這個 disabled 屬性，還是可以更改值的，關(guān)鍵是看后端業(yè)務(wù)邏輯如何處理，一種方法是前端頁面針對修改操作時，不傳 配置項 的值，另一種方法是前端傳值，但是后端不進行處理
總結(jié)
以上所述是小編給大家介紹的Vue動態(tài)控制input的disabled屬性，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue Router是Vue.js (opens new window)官方的路由管理器,它和 Vue.js 的核心深度集成,讓構(gòu)建單頁面應(yīng)用變得易如反掌,這篇文章主要給大家介紹了關(guān)于vue3使用vue-router的相關(guān)資料,需要的朋友可以參考下2021-06-06
在Vue組件中覆蓋樣式,可以使用更高優(yōu)先級的選擇器、!important或深度選擇器（如::v-deep）來實現(xiàn),選擇合適的方法取決于具體需求2025-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單的跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
防抖和節(jié)流的作用都是防止函數(shù)多次調(diào)用，下面這篇文章主要給大家介紹了關(guān)于vue函數(shù)防抖與節(jié)流的正確使用方法，需要的朋友可以參考下2021-05-05
vue實現(xiàn)點擊某個div顯示與隱藏內(nèi)容功能實例
最近做項目有用到某個div顯示與隱藏內(nèi)容,所以下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)點擊某個div顯示與隱藏內(nèi)容功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue項目之頁面class不生效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
使用命令行工具npm新創(chuàng)建一個vue項目的方法
Vue.js 提供一個官方命令行工具，可用于快速搭建大型單頁應(yīng)用。下面小編給大家分享使用命令行工具npm新創(chuàng)建一個vue項目的方法，需要的朋友參考下吧2017-12-12
這篇文章主要介紹了Vue路由vue-router詳細講解指南，對vue-router感興趣的同學(xué)，可以參考下2021-04-04
用vite搭建vue3應(yīng)用的實現(xiàn)方法
這篇文章主要介紹了用vite搭建vue3應(yīng)用的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
vue中promise的使用及異步請求數(shù)據(jù)的方法
這篇文章主要介紹了vue中promise的使用及異步請求數(shù)據(jù)的方法,文章給大家較詳細的介紹了遇到的問題及解決方法，需要的朋友可以參考下2018-11-11