Rumah > hujung hadapan web > View.js > teks badan

Bagaimana untuk menggelung melalui objek dalam vue

下次还敢
Lepaskan: 2024-05-02 20:57:27
asal
705 orang telah melayarinya

Untuk menggelungkan objek dalam Vue, anda boleh menggunakan arahan v-for Sintaks arahan ialah: v-for="item in object". Setiap nilai sifat boleh diberikan dengan mengakses sifat objek (notasi titik atau tanda kurungan segi empat sama) dan terikat pada sifat objek menggunakan arahan v-bind.

Bagaimana untuk menggelung melalui objek dalam vue

Cara untuk menggelung melalui objek dalam Vue

Untuk menggelung melalui objek dalam Vue, anda boleh menggunakan arahan v-for. Arahan ini berguna untuk mengulang tatasusunan dan objek.

Sintaks:

<code><template v-for="item in object">
  <!-- 渲染项 -->
</template></code>
Salin selepas log masuk

Contoh:

Andaikan anda mempunyai objek bernama user dengan sifat berikut:

<code class="javascript">const user = {
  name: 'Jane Doe',
  age: 30,
  occupation: 'Software Engineer'
};</code>
Salin selepas log masuk

Untuk melelaran ke atas objek ini, anda boleh menggunakan kod hartanah berikut:

<code class="html"><template v-for="property in user">
  <p>{{ property }}: {{ user[property] }}</p>
</template></code>
Salin selepas log masuk
Ini akan menjana output berikut:

<code class="html"><p>name: Jane Doe</p>
<p>age: 30</p>
<p>occupation: Software Engineer</p></code>
Salin selepas log masuk

Nota:

    Anda boleh mengakses sifat objek menggunakan tatatanda titik atau tanda kurungan segi empat sama.
  • Arahan v-for boleh digunakan bersama-sama dengan arahan v-bind untuk mengikat sifat objek. Contohnya:
<code class="html"><p v-bind:title="user[property]">{{ property }}</p></code>
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menggelung melalui objek dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
vue
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!