Rumah hujung hadapan web View.js vue.js怎么删除数组里面的数据

vue.js怎么删除数组里面的数据

Nov 11, 2020 am 10:04 AM
vue.js

vue.js删除数组里面数据的方法:首先引入【vue.JS】文件, 并添加vue容器;然后在标签里实例化vue对象,保存代码并直接在浏览器中预览效果;最后点击删除按钮。

vue.js怎么删除数组里面的数据

本教程操作环境:windows10系统、vue2.9,本文适用于所有品牌的电脑。

【相关文章推荐:vue.js

vue.js删除数组里面数据的方法:

第一步, 在已创建的 html5 页面代码中, 引入 vue.JS 文件, 并添加 vue 容器, 包含一个无序列表和两个按钮, 如下图所示:

8721402b6447301dd43c2c55a1407fd.png

第二步, 在 < script> 标签内, 实例化 vue 对象, 调用 el 和 data, 并给 message 赋值, 如下图所示:

81695900e343df55fc367c67afa0bf7.png

第三步, 保存代码并直接在浏览器中预览效果, 可以看到无序列表, 删除按钮和添加按钮, 如下图所示:

78b0e02374be694b4f0bf65184ef7eb.png

第四步, 在 methods 方法中, 添加 delData 和 addData 点击函数, 分别调用 Vue.delete()和 Vue.set(), 如下图所示:

e595bde27ba34b27052db60173c02da.png

第五步, 再次保存代码并运行, 点击删除按钮发现记录无法删除; 修改 Vue.delete 代码, 如下图所示:

08f0c8f9377d4aba17f788f3c83e8cc.png

第六步, 删除方法中的第二个参数是数组的索引, 不是元素的 key 或 Value, 再次运行可以删除了, 如下图所示:

a76860c780c1c35e322064a1aa131d3.png

相关免费学习推荐:JavaScript(视频)

Atas ialah kandungan terperinci vue.js怎么删除数组里面的数据. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Perbincangan mendalam tentang cara vite menghurai fail .env Perbincangan mendalam tentang cara vite menghurai fail .env Jan 24, 2023 am 05:30 AM

Apabila menggunakan rangka kerja Vue untuk membangunkan projek bahagian hadapan, kami akan menggunakan berbilang persekitaran apabila digunakan Selalunya nama domain antara muka yang dipanggil oleh pembangunan, ujian dan persekitaran dalam talian adalah berbeza. Bagaimanakah kita boleh membuat perbezaan? Iaitu menggunakan pembolehubah dan corak persekitaran.

Penjelasan grafik terperinci tentang cara mengintegrasikan editor kod Ace dalam projek Vue Penjelasan grafik terperinci tentang cara mengintegrasikan editor kod Ace dalam projek Vue Apr 24, 2023 am 10:52 AM

Ace ialah editor kod boleh terbenam yang ditulis dalam JavaScript. Ia sepadan dengan fungsi dan prestasi penyunting asli seperti Sublime, Vim dan TextMate. Ia boleh dibenamkan dengan mudah ke dalam mana-mana halaman web dan aplikasi JavaScript. Ace dikekalkan sebagai editor utama untuk Cloud9 IDE dan merupakan pengganti kepada projek Mozilla Skywriter (Bespin).

Apakah perbezaan antara komponenisasi dan modularisasi dalam vue Apakah perbezaan antara komponenisasi dan modularisasi dalam vue Dec 15, 2022 pm 12:54 PM

Perbezaan antara komponenisasi dan modularisasi: Modularisasi dibahagikan dari perspektif logik kod; ia memudahkan pembangunan berlapis kod dan memastikan bahawa fungsi setiap modul berfungsi adalah konsisten. Pengkomponenan adalah perancangan dari sudut antara muka UI pemkomponenan bahagian hadapan memudahkan penggunaan semula komponen UI.

Terokai cara menulis ujian unit dalam Vue3 Terokai cara menulis ujian unit dalam Vue3 Apr 25, 2023 pm 07:41 PM

Vue.js telah menjadi rangka kerja yang sangat popular dalam pembangunan bahagian hadapan hari ini. Memandangkan Vue.js terus berkembang, ujian unit menjadi semakin penting. Hari ini kita akan meneroka cara menulis ujian unit dalam Vue.js 3 dan menyediakan beberapa amalan terbaik serta masalah dan penyelesaian biasa.

Mari kita bercakap secara mendalam tentang reactive() dalam vue3 Mari kita bercakap secara mendalam tentang reactive() dalam vue3 Jan 06, 2023 pm 09:21 PM

Kata Pengantar: Dalam pembangunan vue3, reaktif menyediakan kaedah untuk melaksanakan data responsif. Ini adalah API yang kerap digunakan dalam pembangunan harian. Dalam artikel ini, penulis akan meneroka mekanisme operasi dalamannya.

Perbandingan mudah sintaks JSX dan sintaks templat dalam Vue (analisis kelebihan dan kekurangan) Perbandingan mudah sintaks JSX dan sintaks templat dalam Vue (analisis kelebihan dan kekurangan) Mar 23, 2023 pm 07:53 PM

Dalam Vue.js, pembangun boleh menggunakan dua sintaks berbeza untuk mencipta antara muka pengguna: sintaks JSX dan sintaks templat. Kedua-dua sintaks mempunyai kelebihan dan kekurangannya sendiri Mari kita bincangkan perbezaan, kelebihan dan kekurangannya.

Analisis ringkas tentang cara mengendalikan pengecualian dalam komponen dinamik Vue3 Analisis ringkas tentang cara mengendalikan pengecualian dalam komponen dinamik Vue3 Dec 02, 2022 pm 09:11 PM

Bagaimana untuk mengendalikan pengecualian dalam komponen dinamik Vue3? Artikel berikut akan membincangkan kaedah pengendalian pengecualian komponen dinamik Vue3 Saya harap ia akan membantu semua orang.

Bagaimana untuk menanyakan versi vue semasa Bagaimana untuk menanyakan versi vue semasa Dec 19, 2022 pm 04:55 PM

Terdapat dua cara untuk menanyakan versi Vue semasa: 1. Dalam konsol cmd, laksanakan perintah "npm list vue" untuk menanya versi Hasil output ialah maklumat nombor versi Vue 2. Cari dan buka pakej. json fail dalam projek dan cari Anda boleh melihat maklumat versi vue dalam item "dependensi".

See all articles