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