序文プロジェクト内の小さな要件ポイントでは、ボタンをクリックして数十の条件ボックスを検証し、すべての条件ボックスにデータが入力(選択)されているかどうか(少なくとも1つの条件が真であるかどうか)を判断し、対応する操作を実行します。 判定条件ボックスには、ラジオボタン単一選択ボックス、チェックボックス複数選択ボックス、入力ボックス、入力数値カウンタ、選択セレクタ、スイッチスイッチなどが含まれます。 このプロジェクトでは、ElementコンポーネントライブラリV2.15.6を使用しています。 さまざまな条件に対応するデータ型とデフォルト値
コードの実装アイデア 1 ifを使用して直接判断すると、コードは次のようになります(変数はシミュレーション変数です) // 複数条件の判定は次のように始まります if (obj.radio1 || obj.checkbox1.length > 0 || obj.input1 || obj.inputNumber1 > 0 || obj.select1 || obj.select2.length > 0 || obj.switch1 || obj.radio2 || obj.checkbox2.length > 0 || obj.input2 || obj.inputNumber2 > 0 || obj.select3 || obj.select4.length > 0 || obj.switch2 ...) { // 何かをする } それ以外 { // 条件が満たされない場合は、これを表示します。$message({ メッセージ: 「条件を選択してもう一度お試しください」 タイプ: '警告' }) 偽を返す } 実際のプロジェクトシナリオでは、変数名には多くの意味的な文字があります。if をいくつか書くだけでは、長い文字列を書くことになります。そして、いくつか書いたら、それ以上書けなくなります (たくさんのくだらないことを書いているように感じます)。 もっとエレガントな方法で実現できるでしょうか? アイデア2判定する変数を配列に入れて、map を使用してブール型に処理し、includes を使用して配列に指定されたブール値が含まれているかどうかを判定します。 // 次のように複数条件判定が始まります const arr = [ obj.radio1、 obj.checkbox1.長さ、 オブジェクト入力1、 obj.入力番号1、 オブジェクト選択1、 obj.select2.長さ、 obj.switch1、 obj.radio2、 obj.checkbox2.長さ、 obj.input2、 obj.inputNumber2、 オブジェクト選択3、 obj.select4.長さ、 オブジェクトスイッチ2 ... ] 定数 arr1 = arr.map(item => Boolean(item)) (arr1.includes(true))の場合{ // 何かをする } それ以外 { // 条件が満たされない場合は、これを表示します。$message({ メッセージ: 「条件を選択してもう一度お試しください」 タイプ: '警告' }) 偽を返す } そうですね、大量の判定をこの方法で処理するとスムーズになりますね。^-^ 要約するjs での if 判定をスムーズにする方法についての記事はこれで終わりです。js での if 判定に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 参照ドキュメント
以下もご興味があるかもしれません:
|
会社のウェブサイトのアクセス数が増えてくると(1日10万PV以上)、当然MySQLがボトルネックにな...
テーブルの作成とインデックスの作成 テーブルtbl1を作成( id int ユニーク、sname v...
質問ガイド1. Hadoop 3.x はどのようにして障害を許容するのでしょうか? 2. Hadoo...
この記事では、Vueの計算プロパティ実装レポートカードを参考に共有します。具体的な内容は次のとおりで...
目次1. 問題を発見する2.重複したデータを残さずにすべて削除する3. 削除テーブルから重複データを...
問題記録今日はプログレスバーに似た小さなコンポーネントを完成させるつもりでした。プロトタイプは次のよ...
ハイパーリンクを使用すると、ページからページへ、またはサイトからサイトへ瞬時に移動できます。このよう...
序文vue3.0 が正式にリリースされて以来、多くの友人が vue3.0 に切り替えました。ここでは...
目次序文JSON.stringify の 6 つの機能特集1特集2特集3特集4特集5特集6手動で文字...
目次フロントエンドルーティングとは何ですか?フロントエンドルーティングを実装するにはどうすればいいで...
[nslookup とは?] 】 nslookup コマンドは、Linux で非常によく使用されるネ...
この記事では、ログインジャンプを実装するためのVueの具体的なコードを例として紹介します。具体的な内...
CSS オーバーフローのメカニズムを詳細に学ぶ必要があるのはなぜですか?実際の開発プロセスでは、コン...
目次1. VMwareをインストールする1.1 VMwareworkstationsをダウンロードし...
この記事では、MySQL の自動作成時刻と変更時刻を設定する方法について説明します。ご参考までに、詳...