vue中動態(tài)控制btn的disabled屬性方式
更新時間：2022年04月09日 08:58:37 作者：努力_才幸福
這篇文章主要介紹了vue中動態(tài)控制btn的disabled屬性方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
動態(tài)控制btn的disabled屬性
場景
當ajax請求回來的數(shù)據(jù)為空時，btn為disabled的狀態(tài)，否則，btn的disabled屬性為false
代碼：
<button class="iconDivIcon targetBtn" :class="isdisabled?btndisabled:''" ?style="width:100px;" @click="changeEnables(0)" :disabled="isdisabledFn">禁用</button> ? <div id="app"><button :disabled="isdisabledFn">測試</button><div> ? ?
js中：
var app=new Vue({undefined
? ? ? ? el:"#app",
? ? ? ? data:{undefined
? ? ? ? ? ? ? ? isDisabl:true
? ? ? ? },
? ? ? ? computed:{undefined
? ? ? ? ? ? ? ? isdisabledFn(){undefined
? ? ? ? ? ? ? ? ? ? if(后臺傳過來的數(shù)據(jù)!=null){undefined
? ? ? ? ? ? ? ? ? ? ? ? ? ? return this.isdisabled=false;
? ? ? ? ? ? ? ? ? ? }else{undefined
? ? ? ? ? ? ? ? ? ? ? ? ? ? return this.isdisabled=true;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? }
})動態(tài)改變:disabled的屬性值
找了很久，可能沒人提這么弱智的問題哭唧唧，所以我自己琢磨了很久，終于啊。。
首先
先把那個none改為一個可以修改的值，這里我隨便起的也叫disabled
<date-picker v-model="time1" valueType="format"
ref="userBirthdayInput"
id="userBirthday"
:disabled="disabled"
placeholder="請輸入生日"></date-picker>
然后
設置一個屬性props，里面設置這disabled的默認值為false，注意：這個props與data同級的，不是在data里面的。
export default {
name: "ModifyUserInfo",
props: {
disabled: {
default: false
}
},
data() {
return {
time1: null,
loading: false,
userPhoto: "",
}
}
}
接著
你想在哪把這個值改為true（改這個為不可編輯）就在哪把這只改為：this.disabled=true就可以啦
this.disabled = true
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實現(xiàn)讓頁面加載時請求后臺接口數(shù)據(jù)
這篇文章主要介紹了Vue實現(xiàn)讓頁面加載時請求后臺接口數(shù)據(jù)2022-08-08
這篇文章主要介紹了vue?router如何實現(xiàn)tab切換，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在React和Vue中使用Mock.js模擬接口的實現(xiàn)方法
本文將介紹如何在React和Vue項目中使用Mock.js來模擬接口攔截請求,幫助開發(fā)者在不依賴后端的情況下高效地進行前端開發(fā),文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-08-08
Vue實現(xiàn)遠程獲取路由與頁面刷新導致404錯誤的解決
這篇文章主要介紹了Vue實現(xiàn)遠程獲取路由與頁面刷新導致404錯誤的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue3配置router路由并實現(xiàn)頁面跳轉(zhuǎn)功能
這篇文章主要介紹了vue3配置router路由并實現(xiàn)頁面跳轉(zhuǎn),本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細介紹了vue3如何通過組合鍵,例如command+Enter、shift+Enter、alt + Enter,實現(xiàn)換行操作,感興趣的可以了解下2024-03-03
vue項目預覽excel表格功能(file-viewer插件)
這篇文章主要介紹了vue項目預覽excel表格功能(file-viewer插件),本文分步驟結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
探秘Vue異步更新機制中nextTick的原理與實現(xiàn)
nextTick?是?Vue?提供的一個重要工具,它的作用主要體現(xiàn)在幫助我們更好地處理異步操作,下面就跟隨小編一起來探索一下nextTick的原理與實現(xiàn)吧2024-02-02
uView是uni-app生態(tài)專用的UI框架,uni-app?是一個使用?Vue.js?開發(fā)所有前端應用的框架,這篇文章主要給大家介紹了關(guān)于uniapp使用uview的簡單案例,需要的朋友可以參考下2023-03-03
本文主要介紹了vue實現(xiàn)excel表格的導入導出的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04