エル・チェックボックスピットの要素UIにVUE

一つは、シーン

      チェックボックスを使用することにより、チェックされ、未チェック状態を達成するために、タグをクリックして、シーンに示さ達成。

      

 

例として第二に、公式ウェブサイト

         実装がtrueまたはfalseの値を切り替えることにより、チェック、チェックボックスの状態が切り替わります

<テンプレート> 
  <! - `checked`为真或偽- > 
  <EL-チェックボックスV-モデルは= "確認">备选项</ EL-チェックボックス> 
</テンプレート> 
<スクリプト> 
  輸出デフォルト{ 
    データ() { 
      戻り{ 
        チェック:真
      }。
    } 
  }。
</ SCRIPT>

  結果は以下の通りであります:

     

 

 

 第三に、と思います。

     リチウムを循環させることにより、データに付加属性をチェックし、シーンを達成するために、Vモデルにバインドされました。次のようにテンプレートのコードは次のとおりです。

<テンプレート> 
  の<divクラス= "デモ"> 
    <UL> 
      <LIのV-のための= "(アイテム、インデックス)、リスト内の":キー= "インデックス"> //循环李
        <EL-チェックボックスVモデル= "アイテム.checkedを"> // Vモデル绑定到每个項目的にチェック属性
          {{item.name}} 
        </ EL-チェックボックス> 
      </ LI> 
    </ UL> 
  </ div> 
</テンプレート>

     背景戻りデータ・フォーマット(剪定)、以下のように(チェックされていない属性)

         [ 
            {ID :. 1、PID :. 1、名称: 'エリア'}、
            {ID:2、PID:2名: 'ジャンル'}、
            {ID :. 3、PID :. 4、名称: 'セックス'}、
            {ID:4、PID:5 、名称: ' デバイスタイプ'}、
            {ID :. 5、PID :. 6、名称: "余暇「}、
            {ID :. 6、PID :. 7、名称:"王の栄光'} 、
            {ID :. 7、PID :. 8、名称: '音楽'}、
            {ID :. 8、PID :. 9、名称: 'ブランド時計'}、
            {ID :. 9、PID:10、名称: 'カメラ'}、
            {ID:10、PID:12 、名称: ' ゲーム群衆'} 
          ]

  私は、バックグラウンドデータを取得するために、取り付けられた方法を行うchecked属性を追加するために、各データ・サイクルを与える必要があり、初期値はfalseです。

<スクリプト> 
  エクスポートのデフォルト{ 
    名: 'デモ'、
    データ(){ 
      リターン{ 
        リスト:[]、
        allTags:[]、
      } 
    }、
    メソッド:{ 
      GETLIST(){ 
//アナログのsetTimeoutデータを取得し たsetTimeout(()= > { this.allTags = [ {ID :. 1、PID :. 1、名称: 'エリア'}、 {ID:2、PID:2名: 'ジャンル'}、 {ID :. 3、PID :. 4、名前: '性別'}、 {ID :. 4、PID :. 5、名称: 'デバイスタイプ'}、 {ID :. 5、PID :. 6、名称:「余暇「}、 {ID :. 6、PID :. 7、名前: '王の栄光'}、 {ID :. 7、PID :. 8、名: '音楽'}、 {ID :. 8、PID :. 9、名前: 'ブランドの腕時計'}、 {ID:10名前:9はPID '相机'}、 {ID:10はPID:12名: '游戏人群'} ] this.allTags.map(項目=> { 偽= item.checked リターンアイテム }) this.list = this.allTags }、1500) }、 }、 搭載(){ this.getList() } } </ SCRIPT>  

     これは、結果が問題を発見参照する機能を実現するために考えられている:フックのみボックスの色を変更していないときにクリックしてください。

 

            

 

 

      トラブルシューティング.....

     (脳痛みを伴うプロセスを作る......)

      推測:

        1、要素は、このメソッド・バインディングをサポートしていない、唯一の公式ネットワーク例、サイクルEL-チェックボックスを達成することができます。

        2、VUE結合問題

      質問1の場合:置き換えサイクルエル・チェックボックス、我々は結果は同じではないことがわかりました。負!

      残りは投機2です。

            人工プラスのリターンデフォルトは属性データをチェックし、すなわち、データ・フォーマット:

       [ 
            {ID :. 1、PID :. 1、名称: 'エリア'、チェック:falseに}、
            {ID:2、PID:2名: 'ジャンル'、チェック:falseに}、
            {ID :. 3、PID :. 4 、名称: '性別'、チェック:falseに}、
            {ID :. 4は、PID :. 5は、名称: 'デバイスタイプ'、チェック:falseに}、
            {ID :. 5、PID :. 6、名称: '余暇'は、チェック:} falseに、
            {ID :. 6、PID :. 7、名前: '王の栄光'をチェック:} falseに、
            {ID :. 7、PID :. 8、名前: 'ミュージック'をチェック:falseに}、
            {ID :. 8、 PID:9、名前: '時計のブランド'、確認:} falseに、
            {ID :. 9、PID:10、名前: 'カメラ'チェック:falseに}、
            {ID:10、PID:12は、名称:」ゲーム群衆」チェック:falseに}、
          ]

     テストを発見し、あなたがすることができます。

         混乱。

         その後、コンソール内のデータを印刷し、結果を比較しました。

         印刷は、1と2の属性としてケースとchecked属性のフロントエンドは、それぞれ、そこにチェックアウトされている、リターンデータを再び追加します

                           

 

 

                                                                      図1図2

           発見の比較、フロントプロパティをチェックする追加、VUEはそれゆえ、確認値の変化を監視することはできません、セット方法を取得する追加しないので、ビューを更新することはできません。これは、ブラウザのVUEのデバッグで見ることができ、データが交互にあるときに真と偽のクリックを属性が、ビューが同期していませんがチェック。マップをカット        

            

 

第四に、ソリューション

 

        どちらの方法も、

        1は、データプロパティに割り当てられallTags値を得ることはありませんが、一時変数の定義は、すなわち、リストに割り当てられた操作を、完了した後、してみましょう:

<スクリプト> 
  エクスポートのデフォルト{ 
    名: 'デモ'、
    データ(){ 
      リターン{ 
        リスト:[]、
      } 
    }、
    メソッド:{ 
      GETLIST(){ 
        //のsetTimeoutアナログデータを取得し
        たsetTimeout(()=> { 
         ましょうallTags = [//本明細書で定義される聞かせallTags 
            {ID :. 1、PID :. 1、名称: 'エリア'}、
            {ID:2、PID:2名: 'ジャンル'}、
            {ID :. 3、PID :. 4、名前: '性別'}、
            {ID :. 4、PID :. 5、名称: 'デバイスタイプ'}、
            {ID :. 5、PID :. 6、名称:「余暇「}、
            {ID :. 6、PID :. 7、名前: '王の栄光'}、
            {ID :. 7、PID :. 8、名称: '音楽'}、
            {ID:8はPID:9 、名称: ' 時計のブランド'}、
            {ID :. 9、PID:10、名称:」カメラ'}、
            {ID:10、PID:12である、名称:「ゲームの観客'}、
          ] 
          allTags.map(項目=> { 
            item.checked = falseに
            戻り項目
          })
          This.List = allTags 
        }、1500)
      }、
    }、 
    (){ マウント
      this.getList()
    } 
  } 
</ SCRIPT>  

      2(推奨)、VUEで。$ Setメソッド、強制VUEモニタは、プロパティをチェックします

<スクリプト> 
  エクスポートのデフォルト{ 
    名: 'デモ'、
    データ(){ 
      リターン{ 
        リスト:[]、
      } 
    }、
    メソッド:{ 
      GETLIST(){ 
        //のsetTimeoutアナログデータを取得し
        たsetTimeout(()=> { 
         this.allTags = [//せて本明細書で定義さallTags 
            {ID :. 1、PID :. 1、名称: 'エリア'}、
            {ID:2、PID:2名: 'ジャンル'}、
            {ID :. 3、PID :. 4、名称: '性別'}、
            {ID :. 4、PID :. 5、名称: 'デバイスタイプ'}、
            {ID :. 5、PID :. 6は、名称: '余暇'}、
            {ID :. 6、PID :. 7、名前: '王の栄光'}、
            {ID :. 7、PID :. 8、名前: '音楽'}、
            {ID:8はPID:9 、名称: ' 時計のブランド'}、
            {ID :. 9、PID:10、名称:」カメラ'}、
            {ID:10、PID:12である、名称:「ゲームの観客'}、
          ] 
          this.allTags.map(項目は=> { 
            偽=に//item.checked 
            falseに、この。$セット(項目、「確認」)//ここでは、オブジェクトに設定$の方法を属性を追加します。
            項目を返す
          })
          この= this.allTags .LIST 
        }、1500)
      }、
    }、 
    (){ マウント
      this.getList()
    } 
  } 
</ SCRIPT>  

 行って!

V.まとめ。

       ロックの問題は、ほとんど削ぎ落としたバージョンをやろうと、一歩一歩なので、この要約を行うが、他の子供用の靴は少し助けをピット満たすために後の問題は、私がプロジェクトで発生した問題です。 

      PSは、各要素のUIで、いくつかの感情、笑顔を持っています。

おすすめ

転載: www.cnblogs.com/lovemomo/p/11589929.html