Cara menggunakan arahan v-for untuk menggelungkan data output dalam Vue

Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan banyak arahan berkuasa untuk mengurus paparan dan data dengan mudah. Salah satu arahan yang paling biasa digunakan ialah v-for, yang boleh mengulangi data dan mengeluarkannya. Dalam artikel ini, kita akan belajar cara mengulangi data menggunakan arahan v-for dalam Vue.

Pertama, mari kita lihat penggunaan v-for. Sintaks asas adalah seperti berikut:

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

Dalam kod di atas, kami menggunakan arahan v-for untuk menggelung melalui data dalam tatasusunan list dan mengeluarkannya sebagai elemen li. Perintah v-for terdiri daripada tiga bahagian: v-for="(item, index) in list". Antaranya, (item, index) ialah item dan indeks yang ditentukan, yang boleh diubah mengikut keperluan. list ialah tatasusunan data yang digelung. Atribut

key diperlukan dan perlu unik. Atribut ini digunakan oleh Vue untuk mengenal pasti elemen DOM untuk menjadikan komponen itu lebih pantas. Vue akan memberi amaran jika atribut kunci tidak ditetapkan, jadi pastikan anda menetapkan atribut kunci.

Seterusnya, mari lihat beberapa contoh khusus untuk menunjukkan cara menggunakan arahan v-for untuk menggelung melalui data output dalam Vue.

1. Lintas tatasusunan dan keluarkan senarai

Dalam contoh ini, kami akan menggunakan arahan v-untuk untuk menggelungkan tatasusunan dan mengeluarkannya sebagai senarai. Dalam contoh ini, kami menggunakan operator spread dalam ES6 untuk menyebarkan tatasusunan.

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

<script>
export default {
  data() {
    return {
      list: ['foo', 'bar', 'baz']
    }
  }
}
</script>

Dalam contoh di atas, kami mencipta tatasusunan dan menghantarnya kepada sifat data bagi tika Vue. Seterusnya, kami menggunakan arahan v-for untuk menggelungkan setiap item dalam tatasusunan dan menjadikannya sebagai senarai.

2. Lintas objek dan keluarkan senarai

Dalam contoh ini, kita akan menggunakan arahan v-for untuk menggelungkan objek dan mengeluarkannya sebagai senarai. Kami menggunakan kunci dan nilai dalam objek untuk memaparkan item senarai dan menetapkan sifat kunci kepada nama kunci.

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

<script>
export default {
  data() {
    return {
      obj: {
        foo: 'Foo',
        bar: 'Bar',
        baz: 'Baz'
      }
    }
  }
}
</script>

Dalam contoh di atas, kami mencipta objek dan menyerahkannya kepada sifat data bagi contoh Vue. Kami kemudian menggunakan arahan v-for untuk menggelungkan setiap pasangan nilai kunci dalam objek dan menjadikannya sebagai senarai.

3 Gelung melalui nombor dan keluarkan senarai

Dalam contoh ini, kami akan menggunakan arahan v-untuk untuk menggelungkan nombor dan mengeluarkannya sebagai senarai. Dalam v-for kita menggelungkan nombor ke dalam tatasusunan dan kemudian mengira menggunakan indeks item dalam tatasusunan.

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

Dalam contoh di atas, kami menggunakan arahan v-for untuk menggelungkan nombor ke dalam tatasusunan panjang 5 dan mengeluarkannya sebagai senarai. Kami menggunakan pembolehubah indeks untuk mengira dan menambahnya kepada 1 untuk mendapatkan nombor urutan.

4. Lintas tatasusunan dan keluarkan jadual

Dalam contoh ini, kami akan menggunakan arahan v-for untuk menggelungkan melalui tatasusunan dan mengeluarkannya sebagai jadual HTML. Kami menggunakan sifat yang dikira untuk memisahkan tatasusunan bersarang kepada item data individu.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in flattenedList" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Alice', age: 22, gender: 'Female' },
        { name: 'Bob', age: 25, gender: 'Male' },
        { name: 'Charlie', age: 30, gender: 'Male' },
        { name: 'Diana', age: 27, gender: 'Female' }
      ]
    }
  },
  computed: {
    flattenedList() {
      return this.list.flatMap(item => [item.name, item.age, item.gender])
    }
  }
}
</script>

Dalam contoh di atas, kami mencipta tatasusunan empat objek dan menyerahkannya kepada sifat data tika Vue. Kami kemudian membahagikannya dalam sifat yang dikira, menukar item data bersarang menjadi item data tunggal. Seterusnya, kami menggunakan arahan v-for untuk menggelungkan tatasusunan baharu dan menjadikannya sebagai jadual HTML.

Ringkasan

Dalam Vue, adalah sangat mudah untuk menggunakan arahan v-for untuk menggelungkan data. Anda hanya perlu mengikut sintaks asas, dan berbekalkan data yang betul, anda boleh mula membina templat yang kompleks. Sama ada anda mengulang tatasusunan mudah atau struktur data bersarang yang lebih kompleks, arahan v-for boleh membantu anda mengendalikannya.

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