Cara menggunakan arahan v-for dalam dokumentasi Vue

Vue ialah rangka kerja JavaScript popular yang boleh membina aplikasi web interaktif. Antaranya, arahan v-for Vue adalah salah satu arahan penting yang digunakan untuk menggelungkan data rendering. Dalam artikel ini, kami akan memperkenalkan penggunaan arahan v-for dalam dokumentasi Vue.

Arahan v-for boleh membantu kami membuat dan memproses data yang serupa berulang kali dalam aplikasi. Format sintaksnya adalah seperti berikut:

v-for="(item, index) in items"

Antaranya, "item" ialah pengumpulan data yang ingin kita gelung dan render, yang boleh menjadi tatasusunan atau objek. Semasa gelung, kita boleh menggunakan "item" untuk mewakili item yang sedang diproses, dan "indeks" untuk mewakili nilai indeks item semasa.

Berikut ialah contoh penggunaan arahan v-for untuk menghasilkan tatasusunan:

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子']
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan arahan v-for untuk menghasilkan senarai tidak tertib dengan tiga item senarai . Semasa gelung, kami menggunakan "item" untuk mewakili item semasa dalam tatasusunan, dan "indeks" untuk mewakili nilai indeks item semasa. Selain itu, kami menggunakan arahan ":key" untuk menyediakan pengecam unik bagi setiap item senarai yang diberikan.

Selain tatasusunan, arahan v-for juga boleh digunakan untuk memaparkan sifat objek. Berikut ialah contoh memaparkan sifat objek:

<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: '李雷',
        age: 30,
        location: '中国北京'
      }
    }
  }
}
</script>

Dalam contoh ini, kami memberikan sifat objek. Semasa gelung, kami menggunakan "nilai" untuk mewakili nilai atribut semasa dan "kunci" untuk mewakili nama atribut semasa. Sekali lagi, kami menggunakan arahan ":key" untuk menyediakan pengecam unik bagi setiap item senarai yang diberikan.

Selain gelung asas, arahan v-for juga menyokong penggunaan sifat dan kaedah yang dikira untuk melaksanakan pemaparan dinamik. Berikut ialah contoh menggunakan sifat yang dikira untuk memaparkan data:

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

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子']
    }
  },
  computed: {
    computedItems() {
      return this.items.map((item) => {
        return item.toUpperCase()
      })
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan sifat yang dikira "computedItems" untuk mengembalikan tatasusunan baharu dengan semua elemen dalam tatasusunan asal ditukar kepada huruf besar. Kami kemudian menggunakan arahan v-for untuk memberikan nilai harta yang dikira ini.

Arahan v-for juga menyokong penggunaan arahan v-if untuk melaksanakan pemaparan bersyarat. Berikut ialah contoh pemaparan data menggunakan arahan v-if:

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子', '草莓', '西瓜']
    }
  }
}
</script>

Dalam contoh ini, kami memberikan item ganjil tatasusunan. Semasa gelung, kami menggunakan arahan v-jika untuk menentukan sama ada indeks item semasa ialah nombor genap. Jika ia adalah nombor genap, nilai item semasa diberikan, jika tidak, item semasa tidak diberikan.

Ringkasnya, arahan v-for ialah salah satu arahan penting dalam Vue yang digunakan untuk melaksanakan data pemaparan gelung. Melalui pengenalan di atas, saya percaya anda telah menguasai cara menggunakan arahan v-for dalam Vue. Dalam pembangunan sebenar, kita boleh memilih kaedah gelung yang berbeza mengikut situasi tertentu dan menggunakannya dengan arahan dan komponen lain untuk membina aplikasi web yang lebih fleksibel dan cekap.

Atas ialah kandungan terperinci Cara menggunakan arahan v-for dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!