欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中動(dòng)態(tài)控制btn的disabled屬性方式

 更新時(shí)間:2022年04月09日 08:58:37   作者:努力_才幸福  
這篇文章主要介紹了vue中動(dòng)態(tài)控制btn的disabled屬性方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

動(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的屬性值

比如這個(gè),我想要做這個(gè)功能:當(dāng)我在input輸入生日后,只能輸入一次,輸入完成后才修改為none,一開(kāi)始默認(rèn)為true:disabled="none"

找了很久,可能沒(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)文章

最新評(píng)論