fungsi v-for dalam Vue3: penyelesaian sempurna untuk menyenaraikan pemaparan data

Dalam Vue3, v-for dianggap sebagai cara terbaik untuk memaparkan data senarai. v-for ialah arahan dalam Vue yang membolehkan pembangun melelang melalui tatasusunan atau objek dan menjana sekeping kod HTML untuk setiap item. Arahan v-for ialah salah satu arahan templat paling berkuasa yang tersedia untuk pembangun. Dalam Vue3, arahan v-for telah dioptimumkan lagi, menjadikannya lebih mudah untuk digunakan dan lebih fleksibel.

Perubahan terbesar bagi arahan v-for dalam Vue3 ialah pengikatan elemen. Dalam Vue2, menggunakan arahan v-for memerlukan setiap elemen atribut utama supaya Vue boleh menjejaki status setiap elemen. Ini boleh membawa kepada kerumitan yang tidak perlu dalam beberapa kes. Dalam Vue3, arahan v-for menggunakan gaya kunci baharu, yang boleh terus menggunakan nilai sebagai kunci, dengan itu mengelakkan kod dan pengiraan yang tidak perlu.

Kelebihan arahan v-for dalam Vue3 tidak berhenti di situ sahaja. Vue3 juga menyokong fungsi v-for yang ditentukan pengguna supaya pembangun boleh melintasi tatasusunan dengan cara mereka sendiri. Fungsi v-for tersuai boleh melelaran sebarang jenis struktur data dan boleh mengawal proses lelaran secara fleksibel. Ini ialah ciri yang tidak disokong dalam Vue2 dan boleh membantu pembangun menyelesaikan masalah dalam pemaparan data senarai dengan lebih baik.

Untuk menunjukkan cara fungsi v-for Vue3 berfungsi, kami akan membuat aplikasi mudah yang memaparkan satu siri poster filem. Mari lihat cara melaksanakan aplikasi ini menggunakan fungsi v-for Vue3.

Pertama, kami memerlukan fail JSON untuk menyimpan data semua filem. Berikut ialah contoh fail JSON yang mudah:

[
  {
    "title": "假如爱有天意",
    "poster": "img/love-in-heaven.jpg",
    "rating": "7.5",
    "genre": ["剧情", "爱情"],
    "director": "付士琪",
    "actors": [{
        "name": "张一山",
        "role": "程皓"
      },
      {
        "name": "关晓彤",
        "role": "钟灵"
      },
      {
        "name": "张睿",
        "role": "方致远"
      }
    ]
  },
  {
    "title": "唐人街探案3",
    "poster": "img/tangren3.jpg",
    "rating": "7.6",
    "genre": ["喜剧", "悬疑"],
    "director": "陈思诚",
    "actors": [{
        "name": "王宝强",
        "role": "唐仁"
      },
      {
        "name": "刘昊然",
        "role": "秦风"
      },
      {
        "name": "妻夫木聪",
        "role": "石江山"
      }
    ]
  }
]

Fail ini mengandungi satu set data filem, termasuk tajuk, poster, rating, genre, nama pengarah, nama pelakon dan peranan. Kami akan menggunakan fail JSON ini sebagai sumber data kami.

Seterusnya, kami akan membuat contoh Vue untuk memaparkan senarai filem kami. Kita boleh menggunakan arahan v-for dalam templat Vue untuk mengulang setiap filem dalam sumber data. Kami boleh memasukkan poster, nama dan rating setiap filem dalam elemen HTML untuk memaparkan maklumat filem.

<template>
  <div class="movie-list">
    <div v-for="movie in movies" :key="movie.title">
      <img :src="movie.poster" alt="movie poster" />
      <h2>{{movie.title}}</h2>
      <div>评分：{{movie.rating}}</div>
    </div>
  </div>
</template>

<script>
import moviesData from "./movies.json";

export default {
  data() {
    return {
      movies: moviesData,
    };
  },
};
</script>

<style>
.movie-list {
  display: flex;
  flex-wrap: wrap;
}
.movie-list > div {
  width: 200px;
  margin: 10px;
  text-align: center;
}
.movie-list > div img {
  width: 150px;
  height: 200px;
  margin-bottom: 5px;
}
</style>

Dalam templat Vue ini, kami mula-mula mengimport fail movies.json, yang merupakan sumber data kami. Kami kemudian menyimpan senarai filem daripada fail movies.json ke dalam harta filem bagi contoh Vue. Seterusnya, kami menggunakan arahan v-for untuk mengulangi setiap filem dan menjana sekeping kod HTML untuk setiap filem untuk memaparkan poster, nama dan rating filem itu.

Pada ketika ini, kami telah mencipta aplikasi Vue mudah untuk memaparkan senarai filem. Kami menggunakan arahan v-for dalam Vue3 untuk melingkar melalui objek dan menjana sekeping kod HTML untuk memaparkan poster, nama dan penilaian setiap filem. Kami juga boleh menggunakan fungsi v-for tersuai untuk mengawal proses lelaran dengan lebih baik dan menyelesaikan masalah dalam pemaparan data senarai.

Ringkasnya, fungsi v-for dalam Vue3 ialah alat yang sangat berkuasa dan berfungsi dengan baik dalam memaparkan data senarai. Menggunakan fungsi v-for Vue3, pembangun boleh mengawal proses lelaran dengan lebih fleksibel untuk memenuhi pelbagai jenis struktur data. Untuk senario di mana data dilalui dalam aplikasi Vue, kami boleh menggunakan fungsi v-for Vue3 dengan keyakinan penuh untuk prestasi optimum dan kesederhanaan kod optimum.

Atas ialah kandungan terperinci fungsi v-for dalam Vue3: penyelesaian sempurna untuk menyenaraikan pemaparan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!