vue select コンポーネントの使用方法と無効化方法-jsチュートリアル-php.cn

vue select コンポーネントの使用方法と無効化方法

php中世界最好的语言

リリース： 2018-05-25 14:10:35

オリジナル

2240 人が閲覧しました

今回は、vue select コンポーネントの使用方法と無効化方法について説明します。vue select コンポーネントを使用する場合と無効にする場合の注意事項については、次のとおりです。

ビジネス: メッセージをプッシュするには「WeChat」と「メール」の2つの方法があります。WeChatで送信する場合は、「送信するアプリケーション」を選択する必要があります。

メールで送信する場合は不要です

WeChatで送信する場合は、「送信するアプリケーション」を選択する必要があります。、ページは次のようになります:

vue select コンポーネントの使用方法と無効化方法

メールが送信されると、ページは次のようになります:

邮件vue select コンポーネントの使用方法と無効化方法

公式 Web サイトには具体的な例が示されていませんが、「無効化」 "属性は属性から見つけることができます、

AttributeDescriptionTypeDefault valuedisabled無効にするかどうかBooleanfal se

の実装:

追加無効な属性は次の赤いマークの形式で記述され、この選択ボックスが使用可能かどうかを決定するための TRUE 値と FALSE 値を格納するために使用される isAble 変数を定義します。

<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; //不可用 
      } 
        
     }  
}

ログイン後にコピー

テストメソッドは、それを WeChat に戻す場合は、次のように変更する必要があります。利用可能な状態にしないと、また埋もれてしまいます（笑）。ただし、これはビジネスロジックであり、状況に応じて方法を紹介するだけです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSを使用して複数の配列を結合して再計算する方法

antdドロップダウンボックス連携を使用する手順の詳細な説明

以上がvue select コンポーネントの使用方法と無効化方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。