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

vue select組件的使用與禁用實現(xiàn)代碼

 更新時間：2018年04月10日 11:44:02   作者：焦玉麗  
這篇文章主要介紹了vue--select組件的使用與禁用的實現(xiàn)代碼，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下

業(yè)務(wù)：消息推送方式有兩種，為“微信”和“郵件”，微信發(fā)送時需要選擇“要發(fā)送的應(yīng)用程序”，郵件發(fā)送時不需要

微信發(fā)送時，頁面如下：

頁面

郵件發(fā)送時，選擇器不可用，頁面如下：

郵件頁面

雖然官網(wǎng)上沒有給出具體的例子，但可從屬性中查到 “disabled”屬性，

屬性 說明 類型 默認(rèn)值
disabled 是否禁用 Boolean false

實現(xiàn)：

  添加disabled屬性，寫成如下紅色標(biāo)記格式；定義一個isAble變量，用來存放TRUE和FALSE值，決定此選擇框是否可用。

<Select <span style="color: rgb(255, 0, 0);">v-bind:disabled="isAble" </span>clearable v-model="dataAgentEntity.ID" style="width:240px"> 
   <Option v-for="item in dataAgent" :value="item.ID" :key="item.ID">{{ item.name }}</Option> 
 </Select> 

export default { 
  data(){ 
    return{ 
      isAble: false,//select下拉框是否可用 
    } 
  }

然后就是邏輯中操作變量isAble的值，改變組件的可用禁用狀態(tài)了

 methods:{ 
     Test(){ 
      var vm = this; 
       if (vm.alertType == '郵件') { 
        vm.isAble = true; //不可用 
      } 
        
     }  
}

test方法中只寫了判斷不可用，改回微信時，還要變成可用狀態(tài)，不然又埋了個bug，哈哈。不過這是業(yè)務(wù)邏輯了，只介紹方法，記個筆記，具體視情況而定。

總結(jié)

以上所述是小編給大家介紹vue select組件的使用與禁用實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • 使用vue-cli4.0快速搭建一個項目的方法步驟

    使用vue-cli4.0快速搭建一個項目的方法步驟

    這篇文章主要介紹了使用vue-cli4.0快速搭建一個項目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • 詳解Vue中的自定義指令

    詳解Vue中的自定義指令

    這篇文章主要介紹了Vue中的自定義指令的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下
    2020-12-12
  • vue項目拍照或上傳圖片并實現(xiàn)轉(zhuǎn)化為base64格式

    vue項目拍照或上傳圖片并實現(xiàn)轉(zhuǎn)化為base64格式

    這篇文章主要介紹了vue項目拍照或上傳圖片并實現(xiàn)轉(zhuǎn)化為base64格式方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue3如何實現(xiàn)?6位支付密碼輸入框

    vue3如何實現(xiàn)?6位支付密碼輸入框

    微信、支付寶支付密碼時的密碼輸入框大家都很熟悉，本文主要介紹了vue3如何實現(xiàn)?6位支付密碼輸入框，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • Vue中的ref作用詳解(實現(xiàn)DOM的聯(lián)動操作)

    Vue中的ref作用詳解(實現(xiàn)DOM的聯(lián)動操作)

    這篇文章主要介紹了Vue中的ref作用詳解(實現(xiàn)DOM的聯(lián)動操作),需要的朋友可以參考下
    2017-08-08
  • vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域

    vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域

    這篇文章主要介紹了vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域的相關(guān)資料，及代理跨域的概念原理,需要的朋友可以參考下
    2018-04-04
  • Vue Cli3 創(chuàng)建項目的方法步驟

    Vue Cli3 創(chuàng)建項目的方法步驟

    Vue CLI是一個用于快速Vue.js開發(fā)的完整系統(tǒng)。這篇文章主要介紹了Vue Cli3 創(chuàng)建項目的方法步驟，非常具有實用價值，需要的朋友可以參考下
    2018-10-10
  • Vue組件傳值過程接收不成功的問題及解決

    Vue組件傳值過程接收不成功的問題及解決

    這篇文章主要介紹了Vue組件傳值過程接收不成功的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • Vue引入jquery實現(xiàn)平滑滾動到指定位置

    Vue引入jquery實現(xiàn)平滑滾動到指定位置

    這篇文章主要介紹了Vue引入jquery實現(xiàn)平滑滾動到指定位置的效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2018-05-05
  • Vue.js組件間通信方式總結(jié)【推薦】

    Vue.js組件間通信方式總結(jié)【推薦】

    組件之間通信分為三種：父-子；子-父；跨級組件通信。下面，就組件間如何通信做一些總結(jié)。需要的朋友可以參考下
    2018-11-11

最新評論