ホームページ > ウェブフロントエンド > Vue.js > vue.jsで配列の要素を削除する方法

vue.jsで配列の要素を削除する方法

coldplay.xixi
リリース: 2023-01-13 00:44:44
オリジナル
7543 人が閲覧しました

方法: まず、vue ファイルを導入し、vue コンテナを追加します。次に、vue オブジェクトをインスタンス化し、el と data を呼び出し、メッセージに値を割り当てます。次に、Vue.delete() と Vue.set() を呼び出します。 ) メソッドでは、Vue.delete() の 2 番目のパラメーターを配列インデックスに設定するだけです。

vue.jsで配列の要素を削除する方法

このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9.6、Dell G3 コンピューター。

[関連無料記事は mainf を推奨: vue.js]

vue.js の配列要素を削除する方法:

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

2 番目のステップでは、vue.jsで配列の要素を削除する方法<script></script>

タグ内で、vue オブジェクトをインスタンス化し、el と data を呼び出し、メッセージに値を割り当てます。次の図:

3 番目のステップは、コードを保存し、ブラウザーで直接効果をプレビューすることです。次のように、順序なしリスト、削除ボタン、および追加ボタンが表示されます。 vue.jsで配列の要素を削除する方法

4 番目のステップでは、methods メソッドに delData および addData クリック関数を追加し、vue.jsで配列の要素を削除する方法Vue.delete()

を呼び出し、

Vue.set(それぞれ ) (以下の図に示すように):

5 番目のステップは、コードを再度保存して実行することです。 [削除] ボタンをクリックすると、レコードが削除できないことがわかります。図に示すように、Vue.delete コードを次のように変更します。 vue.jsで配列の要素を削除する方法

6 番目のステップは、 delete メソッドは要素のキーや値ではなく、配列のインデックスです。次のように再度実行すると削除できます。図に示すように: vue.jsで配列の要素を削除する方法

vue.jsで配列の要素を削除する方法

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

javascript(ビデオ)

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート