Rumah hujung hadapan web tutorial js 怎么使用vue的v-for来进行遍历二维数组

怎么使用vue的v-for来进行遍历二维数组

Mar 28, 2018 pm 03:16 PM
v-for kelakuan Melintasi

这次给大家带来怎么使用vue的v-for来进行遍历二维数组,使用v-for进行遍历二维数组的注意事项有哪些,下面就是实战案例,一起来看一下。

如下所示:

<table cellpadding="0" cellspacing="0" class="clearfix bigTable" id=&#39;downloaddata&#39;>
   <tr v-for=&#39;(item, index) in data&#39;>
    <template v-for=&#39;items in item&#39;>
     <template v-for=&#39;(itemss, indexs) in items&#39; v-if=&#39;indexs !== "type"&#39;>
      <td>{{itemss}}</td>
     </template>
    </template>
   </tr>
Salin selepas log masuk

其中,data数据为:

this.data = [
   [
    {
     type: '',
     name: '资产',
     start: '期末余额',
     end: '期初余额'
    },
    {
     type: '',
     name: '负债和所有者权益(或股东权益)',
     start: '期末余额',
     end: '期初余额'
    }
   ],
   [
    {
     type: '',
     name: '资产',
     start: 125000,
     end: 12534567
    },
    {
     type: '',
     name: '负债',
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: '资产',
     name: '货币资金',
     start: 125000,
     end: 12534567
    },
    {
     type: '负债',
     name: '应付短期融资款',
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: '资产',
     name: '其中:客户存款',
     start: 125000,
     end: 12534567
    },
    {
     type: '',
     name: '所有者权益(或股东权益)',
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: '资产',
     name: '',
     start: '',
     end: ''
    },
    {
     type: '所有者权益(或股东权益',
     name: '实收资本(或股本)',
     start: 125000,
     end: 12534567
    }
   ],
   [
    {
     type: '资产',
     name: '资产总计',
     start: 111,
     end: 11
    },
    {
     type: '所有者权益(或股东权益',
     name: '资本公积',
     start: 125000,
     end: 12534567
    }
   ]
  ]
Salin selepas log masuk

结果:

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

如何修改vue请求数据中的值

JQuery如何选中select组件内指定的值

Atas ialah kandungan terperinci 怎么使用vue的v-for来进行遍历二维数组. 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

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

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)

Penjelasan terperinci tentang fungsi v-for dalam Vue3: penyelesaian sempurna untuk menyenaraikan pemaparan data Penjelasan terperinci tentang fungsi v-for dalam Vue3: penyelesaian sempurna untuk menyenaraikan pemaparan data Jun 18, 2023 am 09:57 AM

Dengan kemajuan teknologi digital yang berterusan, pembangunan bahagian hadapan telah menjadi satu profesion yang semakin popular. Vue3 telah menjadi pilihan pertama lebih ramai pembangun kerana kesederhanaan, kemudahan penggunaan, kecekapan dan kestabilannya. Antaranya, fungsi v-for adalah salah satu fungsi teras yang digunakan untuk pemaparan data senarai dalam Vue3. Dalam artikel ini, kami akan memberikan penjelasan terperinci tentang fungsi v-for dalam Vue3, supaya anda boleh menggunakannya dengan lebih baik untuk menyelesaikan masalah pembangunan sebenar. 1. Sintaks asas Sintaks asas bagi fungsi v-for adalah seperti berikut: &lt;divv-

Petua untuk menggunakan v-for untuk melaksanakan pengisihan dinamik dalam Vue Petua untuk menggunakan v-for untuk melaksanakan pengisihan dinamik dalam Vue Jun 25, 2023 am 09:18 AM

Vue ialah rangka kerja JavaScript moden yang membantu kami membina halaman web dinamik dan aplikasi kompleks dengan mudah. Dalam Vue, anda boleh membuat struktur gelung dengan mudah menggunakan v-for untuk menghasilkan data secara berulang. Dalam beberapa senario tertentu, kita juga boleh menggunakan v-for untuk melaksanakan pengisihan dinamik. Artikel ini akan memperkenalkan cara menggunakan v-for untuk melaksanakan teknik pengisihan dinamik dalam Vue, serta beberapa senario dan contoh aplikasi. 1. Gunakan v-for untuk menjadikannya mudah

Java bagaimana untuk menggelung melalui folder dan mendapatkan semua nama fail Java bagaimana untuk menggelung melalui folder dan mendapatkan semua nama fail Mar 29, 2024 pm 01:24 PM

Java ialah bahasa pengaturcaraan yang popular dengan keupayaan pengendalian fail yang berkuasa. Di Java, melintasi folder dan mendapatkan semua nama fail adalah operasi biasa, yang boleh membantu kami mencari dan memproses fail dengan cepat dalam direktori tertentu. Artikel ini akan memperkenalkan cara melaksanakan kaedah melintasi folder dan mendapatkan semua nama fail dalam Java, dan memberikan contoh kod khusus. 1. Gunakan kaedah rekursif untuk melintasi folder Kita boleh menggunakan kaedah rekursif untuk melintasi folder.

Amalan terbaik dan kaedah pengoptimuman prestasi untuk menggunakan v-for dalam Vue Amalan terbaik dan kaedah pengoptimuman prestasi untuk menggunakan v-for dalam Vue Jul 17, 2023 am 08:53 AM

Amalan terbaik dan kaedah pengoptimuman prestasi untuk menggunakan v-for dalam Vue Pengenalan: Dalam pembangunan Vue, adalah perkara biasa untuk menggunakan arahan v-for, yang boleh melintasi dan menjadikan data tatasusunan atau objek pada templat dengan mudah. Walau bagaimanapun, penggunaan v-for yang tidak betul boleh menyebabkan masalah prestasi apabila berurusan dengan data berskala besar. Artikel ini akan memperkenalkan amalan terbaik apabila menggunakan arahan v-for dan menyediakan beberapa kaedah pengoptimuman prestasi. Amalan terbaik: Apabila menggunakan arahan v-for dalam Vue untuk memaparkan setiap item data menggunakan nilai Kunci yang unik, anda perlu

Bagaimana untuk menyelesaikan ralat '[Vue warn]: v-for='item in items': item'. Bagaimana untuk menyelesaikan ralat '[Vue warn]: v-for='item in items': item'. Aug 19, 2023 am 11:51 AM

Cara menyelesaikan ralat "[Vuewarn]:v-for="iteminiitems":item" Semasa proses pembangunan Vue, menggunakan arahan v-for untuk rendering senarai adalah keperluan yang sangat biasa. Walau bagaimanapun, kadangkala kita mungkin menghadapi ralat: "[Vuewarn]:v-for="iteminiitems":item". Artikel ini akan memperkenalkan punca dan penyelesaian ralat ini, dan memberikan beberapa contoh kod. Pertama, mari kita fahami

Yang manakah mempunyai keutamaan yang lebih tinggi, v-jika atau v-untuk dalam vue? Yang manakah mempunyai keutamaan yang lebih tinggi, v-jika atau v-untuk dalam vue? Jul 20, 2022 pm 06:02 PM

Dalam vue2, v-for mempunyai keutamaan yang lebih tinggi daripada v-if dalam vue3, v-if mempunyai keutamaan yang lebih tinggi daripada v-for. Dalam Vue, jangan sekali-kali menggunakan v-if dan v-for pada elemen yang sama pada masa yang sama, yang akan menyebabkan pembaziran prestasi (setiap rendering akan gelung dahulu dan kemudian melakukan pertimbangan bersyarat jika anda ingin mengelakkan situasi ini, Templat boleh bersarang di lapisan luar (penyampaian halaman tidak menjana nod DOM), v-jika penilaian dilakukan pada lapisan ini, dan kemudian gelung v-untuk dilakukan secara dalaman.

Contoh penggunaan fungsi PHP glob(): melintasi semua fail dalam folder tertentu Contoh penggunaan fungsi PHP glob(): melintasi semua fail dalam folder tertentu Jun 27, 2023 am 09:16 AM

Contoh penggunaan fungsi PHPglob(): Melintasi semua fail dalam folder tertentu Dalam pembangunan PHP, selalunya perlu untuk melintasi semua fail dalam folder tertentu untuk melaksanakan operasi kelompok atau membaca fail. Fungsi glob() PHP digunakan untuk mencapai keperluan ini. Fungsi glob() boleh mendapatkan maklumat laluan semua fail yang memenuhi syarat dalam folder yang ditentukan dengan menentukan corak padanan kad bebas. Dalam artikel ini, kami akan menunjukkan cara menggunakan fungsi glob() untuk beralih melalui semua fail dalam folder tertentu

Ralat Vue: Tidak dapat menggunakan arahan v-for dengan betul, bagaimana untuk menyelesaikannya? Ralat Vue: Tidak dapat menggunakan arahan v-for dengan betul, bagaimana untuk menyelesaikannya? Aug 17, 2023 pm 10:45 PM

Ralat Vue: Tidak dapat menggunakan arahan v-for dengan betul, bagaimana untuk menyelesaikannya? Dalam proses pembangunan menggunakan Vue, arahan v-for sering digunakan untuk membuat tatasusunan atau objek dalam gelung. Walau bagaimanapun, kadangkala kami mungkin menghadapi masalah tidak dapat menggunakan arahan v-for dengan betul, dan kami akan melihat mesej ralat yang serupa dalam konsol, seperti "Ralat:Cannotreadproperty'xxx'ofundefined" Masalah ini biasanya berlaku dalam perkara berikut situasi: Muncul di bawah: Import

See all articles