Vue は、すべてと none_vue.js を選択するサンプル コードを実装します。

この記事では主に、select all と none を実装するための Vue のサンプル コードを紹介します。ぜひ一緒に見てください

全選択機能は、以前はプロジェクト開発で主に使用されていたフロントエンド開発では非常に一般的な機能と言えます。最近、私は vue フロントエンド フレームワークを使用して以前のプロジェクトをリファクタリングしていました。 jQuery から Vue への移行は、主に DOM を直接操作するという当初の考え方を、データを使用して操作するという Vue フレームワークの中心的な考え方の変更です。考えることで機能が自然と分かりやすくなります。

例えば、以下の簡単なデモ

では、jQueryの考え方に従って行うと、全選択チェックボックスと全チェックボックス項目を選択し、選択したイベントをそれぞれ登録し、判定する必要があります選択したステータスを使用して、関連するチェックボックスのステータスに対応する設定を設定します。これには多くの DOM 操作が含まれます。

この機能を実現するための vue データ駆動型 dom のアイデアを見てみましょう。

vueのデータ駆動型DOM実装関数

  
    
     全选
  
  
    
     apple
  
  
     banana
  
  
     orange
  

vueの双方向データバインディングv-modelコマンドを使用すると、チェックすると、チェックボックスの値が自動的にバインドされた配列checkDataにプッシュされます。 dom 上で多くの操作を節約できます。

固定オプションの場合はこれを実現できますが、この方法にはいくつかの欠点があります。チェックボックス オプションを追加すると、配列データの双方向バインドがあまり柔軟ではなくなります。ウォッチ内の配列を変更する必要があります。

場合によっては、チェックボックスのオプションがバックグラウンドから動的に取得されるため、より柔軟になります。

たとえば、バックグラウンド データは次のようなものです:

  ajaxData: [{
    name: 'a',
    value: 'apple'
  },{
    name: 'b',
    value: 'banana'
  },{
    name: 'c',
    value: 'orange'
  }]

まずチェックボックス オプションを動的にレンダリングしてから、データ バインディングを実行する必要があります。

  

    
      
       全选
    
    
      
       {{item.name}}
    
  

この方法は最適な書き方ではありませんし、デメリットもいくつかありますので、アドバイスや一緒に議論していただければ幸いです。

githubアドレス: https://github.com/zhangqian00/

関連する推奨事項:

laravel5.3 vueはお気に入り機能を実装します

Vueはクールなメニュープラグインを詳細に実装します

以上がVue は、すべてと none_vue.js を選択するサンプル コードを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。