首頁 web前端 js教程 vue select元件的使用與停用實作程式碼

vue select元件的使用與停用實作程式碼

Apr 10, 2018 pm 02:52 PM
select 實現 停用

這篇文章主要介紹了vue--select組件的使用與禁用的實現代碼,現在分享給大家,需要的朋友可以參考下

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

微信發送時,頁面如下:

vue select元件的使用與停用實作程式碼

郵件發送時,選擇器不可用,頁面如下:

邮件vue select元件的使用與停用實作程式碼

雖然官網上沒有給出具體的例子,但可從屬性中查到“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的值,改變元件的可用停用狀態了

 methods:{ 
     Test(){ 
      var vm = this; 
       if (vm.alertType == &#39;邮件&#39;) { 
        vm.isAble = true; //不可用 
      } 
        
     }  
}
登入後複製


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

相關推薦:

vue select二級聯動第二級預設選取第一個option值

## ##########

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1665
14
CakePHP 教程
1424
52
Laravel 教程
1322
25
PHP教程
1270
29
C# 教程
1250
24
如何在Win11上停用筆記本鍵盤並僅使用外接鍵盤 如何在Win11上停用筆記本鍵盤並僅使用外接鍵盤 Jan 29, 2024 pm 08:48 PM

win11怎麼禁用筆記本自備鍵盤只用外接?詳情我們在使用win11電腦的時候會需要使用到外接鍵盤,但是也有不少的用戶們會選擇停用筆記本自帶鍵盤只用外接,那麼這要怎麼操作?使用者可以直接的點擊搜尋欄下的cmd,然後來進行操作就可以了。以下就讓本站來為用戶們來仔細的介紹一下win11怎麼禁用筆記本自帶鍵盤只用外接詳解吧。 win11怎麼停用筆電自備鍵盤只用外接詳解1、點選電腦底部開始功能表或搜尋。 3.輸入cmd,點選右邊以管理員身分執行。 5.如果要重新啟動的話,可以回到該位置,輸入scconfigi804

華為手機如何實現雙微信登入? 華為手機如何實現雙微信登入? Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入?隨著社群媒體的興起,微信已成為人們日常生活中不可或缺的溝通工具之一。然而,許多人可能會遇到一個問題:在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說,實現雙微信登入並不困難,本文將介紹華為手機如何實現雙微信登入的方法。首先,華為手機自帶的EMUI系統提供了一個很方便的功能-應用程式雙開。透過應用程式雙開功能,用戶可以在手機上同

edge瀏覽器js腳本停用方法 edge瀏覽器js腳本停用方法 Jan 07, 2024 am 11:17 AM

隨著edge瀏覽器的新版更新後很多的小伙伴都很不適應就比如都不知道該怎麼禁用js腳本,今天就為各位帶來了edge瀏覽器js腳本禁用的方法,一起來學習下吧。 edge瀏覽器js腳本:1、開啟瀏覽器,點選右上角的三個點,選擇「設定」。 2、點選左側工作列的「進階」。 3、下拉找到「網站權限」並點選「管理許可」。 4、在「站點權限」中找到「JavaScript」。 5、將其後面的開關關閉即可。

PHP程式設計指南:實作斐波那契數列的方法 PHP程式設計指南:實作斐波那契數列的方法 Mar 20, 2024 pm 04:54 PM

程式語言PHP是一種用於Web開發的強大工具,能夠支援多種不同的程式設計邏輯和演算法。其中,實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中,將介紹如何使用PHP程式語言來實作斐波那契數列的方法,並附上具體的程式碼範例。斐波那契數列是一個數學上的序列,其定義如下:數列的第一個和第二個元素為1,從第三個元素開始,每個元素的值等於前兩個元素的和。數列的前幾元

如何在華為手機上實現微信分身功能 如何在華為手機上實現微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視,微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號,方便管理和使用。在華為手機上實現微信分身功能並不困難,只需要按照以下步驟操作即可。第一步:確保手機系統版本和微信版本符合要求首先,確保你的華為手機系統版本已更新至最新版本,以及微信App

掌握Golang如何實現遊戲開發的可能性 掌握Golang如何實現遊戲開發的可能性 Mar 16, 2024 pm 12:57 PM

在現今的軟體開發領域中,Golang(Go語言)作為一種高效、簡潔、並發性強的程式語言,越來越受到開發者的青睞。其豐富的標準庫和高效的並發特性使它成為遊戲開發領域的一個備受關注的選擇。本文將探討如何利用Golang來實現遊戲開發,並透過具體的程式碼範例來展示其強大的可能性。 1.Golang在遊戲開發中的優勢作為靜態類型語言,Golang正在建構大型遊戲系統

PHP遊戲需求實作指南 PHP遊戲需求實作指南 Mar 11, 2024 am 08:45 AM

PHP遊戲需求實現指南隨著網路的普及和發展,網頁遊戲的市場也越來越火爆。許多開發者希望利用PHP語言來開發自己的網頁遊戲,而實現遊戲需求是其中一個關鍵步驟。本文將介紹如何利用PHP語言來實現常見的遊戲需求,並提供具體的程式碼範例。 1.創造遊戲角色在網頁遊戲中,遊戲角色是非常重要的元素。我們需要定義遊戲角色的屬性,例如姓名、等級、經驗值等,並提供方法來操作這些

如何在Golang中實現精確除法運算 如何在Golang中實現精確除法運算 Feb 20, 2024 pm 10:51 PM

在Golang中實現精確除法運算是一個常見的需求,特別是在涉及金融計算或其它需要高精度計算的場景中。 Golang的內建的除法運算子「/」是針對浮點數計算的,並且有時會出現精度遺失的問題。為了解決這個問題,我們可以藉助第三方函式庫或自訂函數來實現精確除法運算。一種常見的方法是使用math/big套件中的Rat類型,它提供了分數的表示形式,可以用來實現精確的除法運算

See all articles