ホームページ >ウェブフロントエンド >Vue.js >vue.jsで配列内のデータを削除する方法
#このチュートリアルの動作環境: Windows10 システム、vue2.9、この記事はすべてのブランドのコンピューターに適用されます。 【おすすめ関連記事:Vue.js で配列内のデータを削除する方法: 最初に [vue.JS] ファイルを導入して vue コンテナを追加し、次にタグ内で vue オブジェクトをインスタンス化し、コードを保存して効果を直接プレビューします。ブラウザ; 最後に削除ボタンをクリックします。
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 サイトの他の関連記事を参照してください。