vue.jsで配列内のデータを削除する方法

Vue.js で配列内のデータを削除する方法: 最初に [vue.JS] ファイルを導入して vue コンテナを追加し、次にタグ内で vue オブジェクトをインスタンス化し、コードを保存して効果を直接プレビューします。ブラウザ; 最後に削除ボタンをクリックします。

#このチュートリアルの動作環境: Windows10 システム、vue2.9、この記事はすべてのブランドのコンピューターに適用されます。

【おすすめ関連記事:

vue.js】

vue.js で配列内のデータを削除するメソッド:

最初のステップは、次の図に示すように、作成された html5 ページ コードに vue.JS ファイルを導入し、順序なしリストと 2 つのボタンを含む vue コンテナを追加することです。

2 番目のステップでは、次の図に示すように、<script></script> タグ内で vue オブジェクトをインスタンス化し、el と data を呼び出し、メッセージに値を割り当てます。

3 番目のステップは、コードを保存し、ブラウザで直接効果をプレビューすることです。下の図に示すように、順序なしリスト、削除ボタン、追加ボタンが表示されます。 :

4 番目のステップでは、methods メソッドに delData および addData クリック関数を追加し、それぞれ Vue.delete() と Vue.set() を呼び出します。次の図:

5 番目のステップでは、コードを再度保存して実行し、削除ボタンをクリックすると、レコードを削除できないことがわかります。Vue.delete コードを変更します。以下に示すように:

6 番目のステップ、delete メソッドの 2 番目のパラメータは、要素のキーや値ではなく、配列のインデックスです。これは削除できます。次の図に示すように、もう一度実行します。

関連する無料学習の推奨事項: JavaScript

(ビデオ)

以上がvue.jsで配列内のデータを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。