Bagaimana untuk melihat senarai vue

Vue.js ialah rangka kerja JavaScript yang popular yang boleh digunakan untuk membina antara muka web dan aplikasi satu halaman (SPA). Dalam Vue, senarai ialah bentuk pembentangan data yang sangat biasa. Artikel ini akan memperkenalkan beberapa kaedah dan teknik biasa senarai Vue.

1. Gunakan arahan v-for untuk mencipta senarai

Vue menyediakan arahan v-for untuk menggelung melalui tatasusunan atau objek dan mencipta senarai. Apabila menggunakan v-for, anda boleh menggunakan item lelaran semasa, indeks item lelaran semasa, atau kunci lelaran semasa (jika ia adalah objek).

Sebagai contoh, katakan kita mempunyai susunan filem, yang mengandungi beberapa filem. Kita boleh menggunakan v-for untuk menggelungkan melalui tatasusunan untuk mencipta teg li bagi setiap filem pada halaman:

<ul>
  <li v-for="movie in movies" :key="movie.id">{{ movie.title }}</li>
</ul>

Dalam contoh ini, kami menggunakan arahan v-for untuk mengulangi tatasusunan filem dan mencipta tag li untuk setiap filem filem mencipta tag li. Kami juga menentukan atribut utama untuk setiap teg li, yang membantu Vue mengoptimumkan prestasi apabila memaparkan semula senarai.

2. Gunakan sifat yang dikira untuk menapis atau mengisih senarai

Kadangkala kita perlu menapis atau mengisih sebahagian daripada data daripada senarai, Vue menyediakan sifat yang dikira untuk mencapai ini tujuan. Harta yang dikira ialah sifat yang boleh mengira nilai pulangan secara dinamik Apabila sifat itu bergantung pada perubahan, ia akan mengira semula dan mengembalikan nilai baharu.

Sebagai contoh, katakan kita mempunyai tatasusunan filem yang mengandungi semua filem dan tatasusunan Filem ditapis yang mengandungi filem yang dikelaskan sebagai "Tindakan". Kami boleh menggunakan sifat terkira untuk menapis semua filem yang dikelaskan sebagai "Tindakan":

data() {
  return {
    movies: [...],
    genre: 'Action',
  }
},
computed: {
  filteredMovies() {
    return this.movies.filter(movie => movie.genre === this.genre)
  }
}

Dalam contoh ini, kami mentakrifkan sifat terkira yang dipanggil filteredMovies dalam sifat terkira. Ia menggunakan kaedah Array.filter() untuk menapis filem yang genrenya sama dengan genre yang dipilih pada masa ini.

Begitu juga, kita boleh menggunakan sifat yang dikira untuk mengisih senarai. Sebagai contoh, kita boleh mengisih filem dalam tertib menaik atau menurun berdasarkan penilaiannya:

data() {
  return {
    movies: [...],
    sortBy: 'rating',
    sortDirection: 'asc',
  }
},
computed: {
  sortedMovies() {
    return this.movies.sort((a, b) => {
      const sortOrder = this.sortDirection === 'asc' ? 1 : -1
      if (a[this.sortBy] < b[this.sortBy]) {
        return -1 * sortOrder
      }
      if (a[this.sortBy] > b[this.sortBy]) {
        return 1 * sortOrder
      }
      return 0
    })
  }
}

Dalam contoh ini, kami mentakrifkan harta dikira sortedMovies dalam harta yang dikira. Ia menggunakan kaedah Array.sort() untuk mengisih filem berdasarkan atribut ratingnya. Bergantung pada sifat sortDirection, arah isihan mungkin "asc" (menaik) atau "desc" (menurun).

3. Menggunakan senarai dengan sifat objek

Dalam sesetengah kes, senarai kami mungkin bukan sekadar tatasusunan, ia mungkin koleksi objek bersarang. Objek ini mungkin mempunyai sifat dan nilai harta yang berbeza.

Andaikan kita mempunyai filem objek yang mengandungi filem, di mana setiap filem mempunyai atribut tajuk dan tatasusunan genre yang mengandungi kategori filem. Kita boleh menggunakan arahan v-for untuk lelaran ke atas sifat objek seperti yang ditunjukkan di bawah:

<template>
  <div v-for="(movie, key) in movies" :key="key">
    <h2>{{ movie.title }}</h2>
    <ul>
      <li v-for="genre in movie.genres" :key="genre">{{ genre }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movies: {
        1: {
          title: 'The Dark Knight',
          genres: ['Action', 'Crime', 'Drama'],
        },
        2: {
          title: 'Pulp Fiction',
          genres: ['Crime', 'Drama'],
        },
      },
    }
  },
}
</script>

Dalam contoh ini, kami menggunakan arahan v-for untuk melelaran ke atas sifat objek. Kami menggunakan pembolehubah filem dan pembolehubah utama untuk mewakili objek yang sedang diulang dan kunci objek ini. Kami kemudiannya menggunakan arahan v-for untuk beralih melalui setiap kategori filem dan mencipta tag li.

Ringkasan

Dalam artikel ini, kami memperkenalkan beberapa kaedah dan teknik biasa untuk senarai Vue. Kami belajar menggunakan arahan v-for untuk menggelung melalui tatasusunan atau objek dan membuat senarai. Kami juga mempelajari cara menggunakan sifat yang dikira untuk menapis dan mengisih senarai. Akhirnya, kami melihat cara bekerja dengan senarai yang mengandungi sifat objek.

Vue ialah rangka kerja yang sangat berkuasa dan fleksibel Kami berharap artikel ini akan membantu anda dan membolehkan anda menggunakan Vue dengan lebih baik untuk membuat senarai.

Atas ialah kandungan terperinci Bagaimana untuk melihat senarai vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!