vue3 チェックボックスの論理コレクション

html

 1. オプション ロジック: オプションに付属する value 属性値に基づいて確認し、e.target.value を通じてユーザーが選択したオプションを取得し、ユーザーがクリックした後にオプションを受け取るオプション変数を宣言します。

jsコード:

  2. 単一選択の論理的アイデア: ユーザーのクリックのクリック状態とクリック値を取得する必要があります。ここで、何をバインドするかを定義できます。クリック値が変化するため、ID の一意性をバインドすることをお勧めします。ここでバインドされる値は動的です。これら 2 つの値は、クリック イベント e を通じて取得され、v-model 双方向バインディング イベントによって選択されたバインドを通じて処理されます。オプションが単一である限り、選択すると、選択された配列がクリアされます。チェックされた値が true の場合は、選択された値を選択された配列に代入します。取得された値は文字列型であるため、配列でラップする必要があります。

jsコード:

 3. すべての論理アイデアを選択: すべて選択オプション ボックスが選択されているかどうかのステータス値に従って、すべてを選択するかどうかを決定します。選択状態の場合は、リストを走査して現在のページのすべての ID を取得し、プッシュします。現在のページのすべての ID を選択した配列に追加します。選択状態でない場合は、選択した配列をクリアします

jsコード:

   4. 逆選択ロジック: 新しい配列を宣言し、リスト全体を走査し、selected の双方向バインディングを通じて選択された配列を取得します。includes() メソッドを使用して、リスト ID が選択された配列に含まれているかどうかを判断し、戻り値を返します。ブール値。これが高速な場合、選択されていない値を新しい配列にプッシュし、新しい配列を選択した配列に割り当てます。

jsコード:

   5. バッチ削除の論理的考え方: 配列で選択された ID を配列結合メソッドを通じて文字列に変換し、選択された配列に値があるかどうかを判断し、値がある場合は削除インターフェイスを呼び出して削除します。

jsコード:

 

  js宣言コード:

 

おすすめ

転載: blog.csdn.net/m0_71735156/article/details/131966169