Bagaimana untuk membuat nombor siri bertukar secara automatik dalam vue

Vue ialah rangka kerja bahagian hadapan yang popular yang digunakan secara meluas untuk membangunkan aplikasi web interaktif. Dalam Vue, jika anda mahu nombor turutan berubah secara automatik, anda boleh menggunakan arahan v-for.

Arahan v-for boleh menggelung melalui tatasusunan atau objek dan menghasilkan elemen yang sepadan. Semasa rendering, anda boleh menggunakan pembolehubah khas $index untuk mendapatkan nilai indeks elemen semasa dalam tatasusunan. Anda boleh menggunakan $index sebagai nombor siri untuk menandakan elemen semasa.

Berikut ialah contoh. Katakan terdapat senarai tatasusunan yang mengandungi beberapa objek Setiap objek mempunyai nama atribut, yang mewakili nama. Kita boleh menggunakan arahan v-for untuk menjadikan setiap objek dalam senarai sebagai tag li, dan memaparkan nombor siri dan nama dalam tag li.

<ul>
  <li v-for="(item, index) in list">
    {{index+1}}. {{item.name}}
  </li>
</ul>

Dalam templat, gunakan v-for="(item, index) in list" untuk menetapkan setiap elemen dalam senarai kepada pembolehubah item dan tetapkan nilai indeks kepada pembolehubah indeks. Menggunakan {{index+1}} dalam teg li boleh memaparkan nombor siri elemen Tambah 1 kerana indeks tatasusunan bermula dari 0.

Jika elemen dalam senarai berubah secara dinamik, nombor siri akan dikemas kini secara automatik. Vue akan memaparkan semula DOM maya dan mengemas kini halaman berdasarkan perubahan dalam data.

Selain pembolehubah $index, anda juga boleh menyesuaikan pembolehubah nombor siri. Sebagai contoh, kita boleh menyimpan nombor siri dalam atribut nombor siri objek dan kemudian menggunakannya dalam arahan v-for. Berikut ialah contoh:

<ul>
  <li v-for="(item, i) in list" :key="item.id">
    {{item.seq}}. {{item.name}}
  </li>
</ul>

Dalam contoh ini, setiap elemen dalam tatasusunan senarai mempunyai atribut seq, yang mewakili nombor jujukan. Gunakan (i) sebagai pembolehubah indeks dalam arahan v-untuk, dan kemudian gunakan {{item.seq}} untuk memaparkan nombor jujukan. Ambil perhatian bahawa kerana setiap elemen mempunyai atribut id yang unik, atribut id mesti diikat sebagai kunci.

Untuk meringkaskan, terdapat dua cara utama untuk menukar nombor siri secara automatik dalam Vue:

1 Gunakan pembolehubah $index untuk mewakili nilai indeks unsur semasa dalam tatasusunan.

2. Tambahkan atribut nombor siri pada objek data, dan kemudian gunakan pembolehubah tersuai untuk mewakili nombor siri.

Atas ialah kandungan terperinci Bagaimana untuk membuat nombor siri bertukar secara automatik dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!