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

Vue.js ialah rangka kerja bahagian hadapan yang sangat popular Ia menyediakan banyak arahan, komponen dan kaedah untuk memudahkan pembangun membina aplikasi web yang cekap dan kompleks. Antaranya, v-for ialah salah satu arahan yang paling biasa digunakan, yang membolehkan kami menggunakan struktur gelung dalam templat untuk mengulang data dengan cepat dan mudah dalam objek dan tatasusunan. Di bawah, kami akan memperkenalkan secara terperinci cara menggunakan v-for untuk mengulang objek dan tatasusunan dalam Vue.

1 Lelaran tatasusunan

Dalam templat Vue, kita boleh menggunakan arahan v-for untuk mengulang data dalam tatasusunan. Format sintaksnya adalah seperti berikut:

<div v-for="(item, index) in array" :key="item.id">{{ item.value }}-{{ index }}</div>

Antaranya, item mewakili elemen dalam tatasusunan, indeks mewakili indeks elemen semasa dalam tatasusunan dan tatasusunan mewakili tatasusunan yang akan diulang. Kita boleh menggunakan kurungan untuk melampirkan item dan indeks, dan menggunakan kata kunci dalam untuk memisahkannya daripada nama tatasusunan.

Dalam contoh di atas, kami juga menggunakan atribut :key untuk menentukan pengecam unik bagi setiap elemen yang diulang untuk meningkatkan prestasi apabila Vue memaparkan semula.

Jika kita mempunyai tatasusunan yang mengandungi nombor seperti:

<script>
  export default {
    data() {
      return {
        numbers: [1, 2, 3, 4, 5]
      }
    }
  }
</script>

kita boleh menggunakan v-for dalam templat untuk mengulanginya:

<ol>
  <li v-for="number in numbers" :key="number">{{ number }}</li>
</ol>

Ini akan mencipta senarai A yang tersusun di mana setiap item ialah nombor dalam tatasusunan.

Selain menggunakan v-for dalam templat untuk memaparkan tatasusunan, kami juga boleh memproses tatasusunan dalam sifat pengiraan Vue dan kemudian menggunakannya dalam templat. Sebagai contoh, kita boleh mencipta harta yang dikira untuk menapis nombor genap dalam tatasusunan:

<script>
  export default {
    data() {
      return {
        numbers: [1, 2, 3, 4, 5]
      }
    },
    computed: {
      evenNumbers() {
        return this.numbers.filter((number) => number % 2 === 0)
      }
    }
  }
</script>

<ol>
  <li v-for="number in evenNumbers" :key="number">{{ number }}</li>
</ol>

Ini akan mencipta senarai yang hanya memaparkan nombor genap dalam tatasusunan.

2. Lelaran objek

Serupa dengan tatasusunan, Vue juga membenarkan kami menggunakan v-for untuk mengulang sifat dalam objek. Format sintaksnya adalah seperti berikut:

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

Antaranya, nilai mewakili nilai atribut dalam objek, kunci mewakili nama atribut dan objek mewakili objek yang akan diulang.

Jika kita mempunyai objek yang mengandungi maklumat pengguna seperti:

<script>
  export default {
    data() {
      return {
        user: {
          name: 'Alice',
          age: 30,
          email: 'alice@example.com'
        }
      }
    }
  }
</script>

kita boleh menggunakan v-for untuk melelar ke atasnya dan menjadikan sifat di dalamnya:

<dl>
  <dt>User info</dt>
  <dd v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</dd>
</dl>

Ini akan mewujudkan Senarai definisi di mana setiap frasa memaparkan nama atribut dan nilainya.

Selain menggunakan v-for dalam templat untuk memaparkan objek, kami juga boleh memproses objek dalam sifat pengiraan Vue dan kemudian menggunakannya dalam templat. Sebagai contoh, kita boleh mencipta sifat terkira untuk menapis sifat yang pengguna berumur lebih daripada 25 tahun:

<script>
  export default {
    data() {
      return {
        user: {
          name: 'Alice',
          age: 30,
          email: 'alice@example.com'
        }
      }
    },
    computed: {
      ageOver25() {
        return Object.keys(this.user)
          .filter((key) => key === 'age' ? this.user[key] > 25 : true)
          .reduce((obj, key) => {
            obj[key] = this.user[key]
            return obj
          }, {})
      }
    }
  }
</script>

<dl>
  <dt>User info (age over 25)</dt>
  <dd v-for="(value, key) in ageOver25" :key="key">{{ key }}: {{ value }}</dd>
</dl>

Ini akan membuat senarai yang ditentukan yang hanya memaparkan sifat yang pengguna berumur lebih daripada 25 tahun.

Ringkasan

v-for ialah arahan yang sangat biasa digunakan dalam Vue Ia membolehkan kami menggunakan struktur gelung dalam templat untuk mengulang data dalam tatasusunan dan objek dengan cepat dan mudah. Dalam pembangunan sebenar, kami akan kerap menggunakan v-for untuk memaparkan struktur data secara dinamik seperti senarai dan jadual Oleh itu, adalah sangat penting untuk mahir dalam penggunaan v-for.

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