vue select組件的使用與禁用實現代碼
更新時間：2018年04月10日 11:44:02 作者：焦玉麗
這篇文章主要介紹了vue--select組件的使用與禁用的實現代碼，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下
業(yè)務：消息推送方式有兩種，為“微信”和“郵件”，微信發(fā)送時需要選擇“要發(fā)送的應用程序”，郵件發(fā)送時不需要
微信發(fā)送時，頁面如下：
郵件發(fā)送時，選擇器不可用，頁面如下：
雖然官網上沒有給出具體的例子，但可從屬性中查到 “disabled”屬性，
| 屬性 | 說明 | 類型 | 默認值 |
|---|---|---|---|
| disabled | 是否禁用 | Boolean | false |
實現：
添加disabled屬性，寫成如下紅色標記格式；定義一個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è)務邏輯了，只介紹方法，記個筆記，具體視情況而定。
總結
以上所述是小編給大家介紹vue select組件的使用與禁用實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
您可能感興趣的文章:
相關文章
這篇文章主要介紹了使用vue-cli4.0快速搭建一個項目的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要介紹了Vue中的自定義指令的相關資料，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了vue項目拍照或上傳圖片并實現轉化為base64格式方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
微信、支付寶支付密碼時的密碼輸入框大家都很熟悉，本文主要介紹了vue3如何實現?6位支付密碼輸入框，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了Vue中的ref作用詳解(實現DOM的聯動操作),需要的朋友可以參考下2017-08-08
這篇文章主要介紹了vue 設置proxyTable參數進行代理跨域的相關資料，及代理跨域的概念原理,需要的朋友可以參考下2018-04-04
Vue CLI是一個用于快速Vue.js開發(fā)的完整系統(tǒng)。這篇文章主要介紹了Vue Cli3 創(chuàng)建項目的方法步驟，非常具有實用價值，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了Vue組件傳值過程接收不成功的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了Vue引入jquery實現平滑滾動到指定位置的效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
組件之間通信分為三種：父-子；子-父；跨級組件通信。下面，就組件間如何通信做一些總結。需要的朋友可以參考下2018-11-11