Vue データの動的追加と動的バインディングのアイデア (画像とテキスト)

この記事は、vue データの動的追加と動的バインディングのアイデアに関するものであり、必要としている友人が参考になれば幸いです。

事例から始めましょう

まず、件名を選択するときに、次のことも追加します。科目の満点値設定。

以前の jquery の記述方法: チェックを入れると dom ノードを作成し、その dom ノードを親ノードに追加します。このようにして、プロジェクトは、フルスコア値を分離して対話します。設定された主題は範囲外です。さらに一歩進んで、最初にフルスコア値を設定するすべての入力をバインドし、次に表示と非表示を制御します。この方法で目的は達成されますが、背景からオプションを取得した後、背景を変更すると、それに応じて変更されます。

データ駆動型ビューのアイデアを最大限に活用します:

コード スニペット

1。この関数の動作: 関数によって渡された値が配列に含まれているかどうかを判断するには、ここでトラバーサル メソッドを使用して配列をループし、配列内のオブジェクトのサブジェクト値が渡された値と等しいかどうかを確認します。これは、配列にこの項目が含まれていることを意味し、このサブジェクトはすでにチェックされており、削除する必要があることを意味します。ここでは、値を直接変更するために splic メソッド (Vue のミューテーション メソッド) を使用して削除します。元の配列のデータを取得し、Vue を送信してビューを更新します。

#2 説明: フルスコア値ループの配列を定義します

3. 説明: この配列は上記の CheckBox

## のデータです。 説明: v-for ループの詳細な記述方法

以上がVue データの動的追加と動的バインディングのアイデア (画像とテキスト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。