首頁 > web前端 > js教程 > 主體

怎樣操作vue select元件使用與停用

php中世界最好的语言
發布: 2018-05-25 14:10:35
原創
2219 人瀏覽過

這次給大家帶來怎樣操作vue select元件使用與禁用,操作vue select元件使用與禁用的注意事項有哪些,下面就是實戰案例,一起來看一下。

業務:訊息推送方式有兩種,為“微信”和“郵件”,微信發送時需要選擇“要發送的應用程式”,郵件發送時不需要

微信發送時,頁面如下:

怎樣操作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下拉框是否可用 
    } 
  }
登入後複製
然後就是邏輯中操作變數isAble的值,改變元件的可用停用狀態了

 methods:{ 
     Test(){ 
      var vm = this; 
       if (vm.alertType == '邮件') { 
        vm.isAble = true; //不可用 
      } 
        
     }  
}
登入後複製
test方法中只寫了判斷不可用,改回微信時,還要變成可用狀態,不然又埋了個bug,哈哈。不過這是業務邏輯了,只介紹方法,記個筆記,具體視情況而定。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:
如何使用JS實作合併多個陣列去重算

############antd下拉方塊連動使用步驟詳解#########

以上是怎樣操作vue select元件使用與停用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板