Cara menggunakan v-for untuk mengulang tatasusunan atau objek dalam Vue

Vue.js ialah rangka kerja JavaScript fleksibel yang membolehkan pembangun membina aplikasi web interaktif dengan lebih mudah. Dalam Vue, kita boleh menggunakan arahan v-for untuk mengulangi tatasusunan atau objek dan menjana elemen HTML yang sepadan.

Lelaran tatasusunan

Dalam Vue.js, kita boleh menggunakan arahan v-for untuk mengulangi tatasusunan. Berikut ialah contoh mudah:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["apple", "banana", "orange"],
    };
  },
};
</script>

Dalam contoh di atas, arahan v-for berulang ke atas tatasusunan item. Item dan indeks dalam arahan mewakili setiap elemen dalam tatasusunan dan subskripnya dalam tatasusunan masing-masing. Nota: Untuk mengelakkan amaran pendua, kami perlu menentukan kunci unik menggunakan atribut :key (dalam kes ini, kami menggunakan indeks tatasusunan sebagai kunci).

Lelaran objek

Selain menyusun tatasusunan, Vue.js juga membenarkan kami mengulangi objek. Berikut ialah contoh mudah:

<template>
  <div>
    <ul>
      <li v-for="(value, key) in object" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      object: {
        name: "Tom",
        age: 18,
        hobby: "swimming",
      },
    };
  },
};
</script>

Dalam contoh di atas, arahan v-for berulang ke atas objek objek. Nilai dan kunci dalam arahan mewakili setiap nilai dan kunci yang sepadan dalam objek masing-masing. Seperti lelaran tatasusunan, kita perlu menentukan kunci unik menggunakan :key (dalam kes ini, kita menggunakan kunci dalam objek sebagai kunci).

Ringkasan

Arahan v-for Vue.js memudahkan lelaran pada tatasusunan atau objek. Sama ada apabila melelaran pada tatasusunan atau objek, kita perlu menentukan kunci unik menggunakan :key untuk mengelakkan pertindihan.

Saya harap artikel ini membantu anda, dan selamat mengekod!

Atas ialah kandungan terperinci Cara menggunakan v-for untuk mengulang tatasusunan atau objek dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!