Bagaimana untuk menggunakan Vue untuk melaksanakan fungsi penapisan dan pengambilan data?

Vue ialah rangka kerja JavaScript popular yang sering digunakan untuk membina aplikasi web moden. Sistem pengikatan data Vue menjadikan pembangunan bahagian hadapan lebih mudah dan lebih intuitif. Vue juga menyediakan beberapa alat berguna untuk memproses data, seperti penapisan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue untuk melaksanakan fungsi penapisan dan pengambilan data.

1. Gunakan sifat yang dikira untuk penapisan data

Sifat yang dikira Vue adalah responsif dan boleh mengemas kini data dalam masa nyata mengikut perubahan dalam data bergantung. Ini membolehkan kami menulis penapis data dengan sangat mudah. Sifat yang dikira boleh mengembalikan tatasusunan baharu yang boleh digunakan untuk memaparkan data yang ditapis dalam aplikasi kami.

Dalam contoh di bawah, kami melaksanakan fungsi carian melalui kotak input. Kami mengikat kotak input ini pada model data contoh komponen Vue. Kami kemudian menggunakan sifat yang dikira untuk menapis data senarai untuk hanya memaparkan item yang mengandungi kata kunci carian.

HTML:

<div id="app">
  <input v-model="search" type="text" placeholder="Search...">
  <ul>
    <li v-for="item in filteredItems">{{ item }}</li>
  </ul>
</div>

JavaScript:

new Vue({
  el: '#app',
  data: {
    search: '',
    items: [
      'Apple',
      'Banana',
      'Orange',
      'Mango',
      'Pear'
    ]
  },
  computed: {
    filteredItems: function () {
      var search = this.search.toLowerCase();
      return this.items.filter(function (item) {
        return item.toLowerCase().indexOf(search) !== -1;
      })
    }
  }
})

Kami mengikat kotak input pada atribut carian melalui arahan v-model. Kami kemudian menggunakan arahan v-for untuk memaparkan data yang ditapis ke dalam templat.

Dalam sifat yang dikira bagi contoh Vue, kami mula-mula menukar kata kunci carian kepada huruf kecil, dan kemudian menggunakan kaedah penapis() untuk menapis item yang sepadan dengan kata kunci carian.

2. Gabungkan penghalaan dan sifat yang dikira untuk penapisan dan pengambilan data

Jika kami menggunakan Penghala Vue untuk mengurus penghalaan, kami boleh menggunakan parameter pertanyaan penghala untuk melaksanakan fungsi carian yang lebih maju. Dengan cara ini pengguna boleh melihat hasil carian mereka dalam URL dan boleh berkongsi hasil carian melalui parameter pertanyaan URL.

HTML:

Mula-mula kita perlu menukar pengikatan kotak input kita supaya kita lulus nilai carian sebagai parameter pertanyaan. Kami menggunakan objek $route dalam penghala untuk mendapatkan parameter carian. Kemudian, kami mengubah suai sifat yang dikira untuk menggunakan parameter laluan dan bukannya model data contoh komponen.

<div id="app">
  <input v-model="search" type="text" placeholder="Search...">
  <ul>
    <li v-for="item in filteredItems">{{ item }}</li>
  </ul>
</div>

JavaScript:

const router = new VueRouter({
  routes: [{
    path: '/',
    component: App,
    name: 'home'
  }]
});

const App = {
  data: function() {
    return {
      items: [
        'Apple',
        'Banana',
        'Orange',
        'Mango',
        'Pear'
      ],
      search: ''
    };
  },
  computed: {
    filteredItems: function() {
      var search = this.$route.query.search.toLowerCase();
      return this.items.filter(function(item) {
        return item.toLowerCase().indexOf(search) !== -1;
      });
    }
  }
};

new Vue({
  router,
  el: '#app',
  template: '<router-view></router-view>'
});

Kami menghantar penghala ke contoh Vue dan kemudian menggantikan arahan paparan penghala dengan komponen kami. Dalam komponen, kita boleh menggunakan $route.query.search untuk mendapatkan parameter pertanyaan. Kami kemudian menggunakan sifat yang dikira untuk menapis senarai berdasarkan parameter carian.

Dalam contoh ini, selagi pengguna memasukkan kata kunci carian baharu dalam kotak input, kami akan mengemas kini parameter pertanyaan dalam URL dan mengemas kini senarai berdasarkan parameter baharu.

Ringkasan:

Dalam artikel ini, kami memperkenalkan penggunaan sifat dan penghala yang dikira dalam Vue untuk melaksanakan fungsi penapisan dan pengambilan data. Dengan cara ini kami membenarkan pengguna melihat hasil carian mereka dalam URL dan berkongsi hasil carian mereka dengan mudah di tempat lain. Kami juga telah melihat bahawa sistem harta pengikatan dan pengiraan data Vue sangat memudahkan kesukaran melaksanakan fungsi carian dan penapisan pada bahagian hadapan.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan fungsi penapisan dan pengambilan data?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!