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使用axios實(shí)現(xiàn)動(dòng)態(tài)追加數(shù)據(jù)
在vuejs中使用axios時(shí),有時(shí)候需要追加數(shù)據(jù),比如,移動(dòng)端下拉觸底加載,分頁(yè)加載,滑動(dòng)滾動(dòng)條等,下面小編就來(lái)為大家介紹一下如何使用使用axios實(shí)現(xiàn)動(dòng)態(tài)追加數(shù)據(jù)吧2023-10-10Vue中v-html圖片過(guò)大導(dǎo)致溢出的問(wèn)題及解決
這篇文章主要介紹了Vue中v-html圖片過(guò)大導(dǎo)致溢出的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04詳解vue結(jié)合el-table實(shí)現(xiàn)表格小計(jì)總計(jì)需求(summary-method)
這篇文章主要介紹了vue結(jié)合el-table實(shí)現(xiàn)表格小計(jì)總計(jì)需求(summary-method),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01Vue使用axios發(fā)送請(qǐng)求并實(shí)現(xiàn)簡(jiǎn)單封裝的示例詳解
這篇文章主要介紹了Vue使用axios發(fā)送請(qǐng)求并實(shí)現(xiàn)簡(jiǎn)單封裝,主要包括安裝axios及簡(jiǎn)單使用配置方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06Vue組件實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫(huà)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07Vue中$bus的用法及$on、$off的使用說(shuō)明
這篇文章主要介紹了Vue中$bus的用法及$on、$off的使用說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05