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

Dalam Vue, v-for ialah arahan yang boleh digunakan dalam templat untuk menggelung tatasusunan atau objek. Arahan v-for digunakan untuk menggelungkan data pemaparan dan merupakan salah satu arahan yang sangat berguna dalam Vue. Dalam Vue, cara menggunakan arahan v-for untuk menggelungkan objek adalah serupa dengan cara untuk menggelungkan tatasusunan, dengan hanya sedikit perbezaan.

Bagaimana cara menggunakan arahan v-for untuk menggelung objek? Di bawah ini kami akan menerangkannya dalam bahagian berikut.

1. Penggunaan asas arahan v-untuk

Sintaks asas arahan v-untuk adalah seperti berikut:

<div v-for="(item,index) in items">{{ index }} - {{ item }}</div>

Antaranya, item mewakili tatasusunan atau objek kepada digelung; item mewakili elemen yang diulang; indeks mewakili indeks elemen dalam tatasusunan atau objek.

Mengambil tatasusunan sebagai contoh, kita boleh menggelungkan elemen dalam tatasusunan seperti ini:

<div v-for="(item,index) in items">{{ index }} - {{ item }}</div>

2. Gelung melalui atribut dalam objek output

Dalam Vue , kita boleh menggunakan v Gelung arahan -for untuk mengeluarkan atribut dalam objek Kaedahnya adalah seperti berikut:

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

Antaranya, objek mewakili objek yang akan dioutputkan mewakili nilai atribut diulang; kunci mewakili nama atribut yang diulang; indeks mewakili elemen Indeks dalam objek.

Mari kita lihat contoh khusus:

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

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 20,
        sex: '男'
      }
    }
  }
}
</script>

Kod di atas akan melingkari atribut dalam objek pengguna dan mengeluarkan indeks, nama atribut dan nilai atribut dalam objek tempat atribut terletak. Hasil keluaran akhir adalah seperti berikut:

0 - name: 张三
1 - age: 20
2 - sex: 男

3. Gunakan arahan v-for untuk mengira atribut secara berulang

Dalam Vue, kita juga boleh menggunakan arahan v-for untuk mengira atribut secara berulang, yang berguna untuk beberapa senario Aplikasi khas adalah sangat berguna.

Sebagai contoh, kita boleh menggunakan sifat yang dikira untuk mendapatkan semua sifat dalam objek yang memenuhi kriteria. Kod khusus adalah seperti berikut:

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

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 20,
        sex: '男'
      }
    }
  },
  computed: {
    filteredUser() {
      return Object.keys(this.user).reduce((result, key) => {
        if (key !== 'sex') {
          result[key] = this.user[key];
        }
        return result;
      }, {});
    }
  }
}
</script>

Kod di atas akan menggunakan atribut yang dikira untuk mendapatkan semua atribut dalam objek pengguna kecuali atribut seks, dan akhirnya mengeluarkan atribut ini dalam gelung. Keputusan output akhir adalah seperti berikut:

0 - name: 张三
1 - age: 20

Untuk meringkaskan, anda perlu memberi perhatian kepada perkara berikut apabila menggunakan arahan v-for untuk menggelung objek output:

1. Asas sintaks arahan v-untuk dan tatasusunan keluaran gelung Dengan cara yang sama.
2. Membuka pada sifat dalam objek output memerlukan sintaks khusus arahan v-for.
3. Kita juga boleh menggunakan sifat terkira untuk mendapatkan elemen yang memenuhi syarat dalam objek, dan kemudian menggunakan arahan v-untuk untuk output lelaran.

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