這次給大家帶來怎樣操作vue select元件使用與禁用,操作vue select元件使用與禁用的注意事項有哪些,下面就是實戰案例,一起來看一下。
業務:訊息推送方式有兩種,為“微信”和“郵件”,微信發送時需要選擇“要發送的應用程式”,郵件發送時不需要
微信發送時,頁面如下:
郵件發送時,選擇器不可用,頁面如下:
雖然官網上沒有給具體的例子,但可從屬性中查到「disabled」屬性,
屬性 | 說明 | 類型 | 預設值 |
---|---|---|---|
#disabled | 是否停用 | Boolean |
#Boolean false
#實作:
新增disabled屬性,寫成如下紅色標記格式;定義一個isAble變量,用來存放TRUE和FALSE值,決定此選擇框是否可用。<select>v-bind:disabled="isAble" clearable v-model="dataAgentEntity.ID" style="width:240px"> <option>{{ item.name }}</option> </select> export default { data(){ return{ isAble: false,//select下拉框是否可用 } }
methods:{ Test(){ var vm = this; if (vm.alertType == '邮件') { vm.isAble = true; //不可用 } } }
以上是怎樣操作vue select元件使用與停用的詳細內容。更多資訊請關注PHP中文網其他相關文章!