Cara melaksanakan penapisan dan pengisihan data dalam Vue

Cara melaksanakan penapisan dan pengisihan data dalam Vue

Pengenalan:
Vue.js ialah rangka kerja bahagian hadapan JavaScript yang popular yang menyediakan banyak alatan dan ciri yang berkuasa untuk memudahkan proses pembangunan. Salah satu keperluan biasa ialah menapis dan mengisih data Artikel ini akan memperkenalkan cara melaksanakan fungsi ini dalam Vue dan menyediakan beberapa contoh kod khusus.

1. Penapisan data
Untuk melaksanakan penapisan data dalam Vue, anda boleh menggunakan sifat terkira untuk menjana tatasusunan baharu secara dinamik yang hanya mengandungi elemen yang memenuhi syarat tertentu. Berikut ialah contoh:

<template>
  <div>
    <input v-model="search" placeholder="请输入搜索关键字" @input="filterData" />
    <ul>
      <li v-for="item in filteredData" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      data: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
        { id: 4, name: 'Pear' },
      ],
    };
  },
  computed: {
    filteredData() {
      return this.data.filter(item => item.name.toLowerCase().includes(this.search.toLowerCase()));
    },
  },
  methods: {
    filterData() {
      // 可以在这里进行一些其他的筛选操作
    },
  },
};
</script>

Dalam contoh ini, kami menerima kata kunci carian pengguna melalui kotak input dan menggunakan atribut yang dikira "filteredData" untuk menjana tatasusunan baharu yang mengandungi hanya item data yang memenuhi syarat. Kaedah penapis tatasusunan digunakan dalam atribut yang dikira, yang menerima fungsi panggil balik untuk menentukan sama ada setiap elemen memenuhi syarat. Dalam contoh ini, atribut nama digunakan untuk penapisan dan toLowerCase() digunakan untuk menukar kata kunci carian dan nama item data kepada huruf kecil untuk padanan tidak sensitif huruf besar.

Perlu diingatkan bahawa kami memanggil kaedah filterData dengan mengikat acara @input pada elemen input, supaya setiap kali pengguna memasukkan huruf, operasi penapisan akan dicetuskan dan hasil penapisan akan dikemas kini dalam masa nyata.

2. Pengisihan data
Terdapat banyak cara untuk melaksanakan pengisihan data dalam Vue Kita boleh menggunakan sifat yang dikira untuk mencapainya, atau kita boleh memanggil kaedah pengisihan JavaScript secara terus. Berikut ialah contoh pengisihan menggunakan sifat yang dikira:

<template>
  <div>
    <button @click="sortBy('name')">按名称排序</button>
    <button @click="sortBy('id')">按ID排序</button>
    <ul>
      <li v-for="item in sortedData" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
        { id: 4, name: 'Pear' },
      ],
    };
  },
  computed: {
    sortedData() {
      return this.data.slice().sort((a, b) => a.id - b.id);
    },
  },
  methods: {
    sortBy(key) {
      this.data.sort((a, b) => {
        if (a[key] < b[key]) return -1;
        if (a[key] > b[key]) return 1;
        return 0;
      });
    },
  },
};
</script>

Dalam contoh ini, kami menggunakan dua butang untuk memanggil kaedah isih Mengikut untuk mengisih mengikut nama dan ID. Dalam harta terkira sortedData, kami menggunakan kaedah slice() untuk menyalin tatasusunan untuk mengelakkan pengubahsuaian langsung data asal. Kami kemudian menggunakan kaedah sort() untuk mengisih tatasusunan yang disalin, menghantar fungsi perbandingan untuk menentukan peraturan pengisihan.

Dalam kaedah sortBy, kami menentukan atribut yang hendak diisih berdasarkan nilai kunci yang diluluskan. Dalam fungsi perbandingan, kami menggunakan a[key] dan b[key] untuk mengakses nilai atribut yang sepadan untuk perbandingan Nilai pulangan negatif bermakna a harus diletakkan sebelum b, dan nilai pulangan positif bermakna a harus ditarafkan selepas b. Nilai pulangan 0 menunjukkan bahawa kedua-dua elemen adalah sama.

Ringkasan:
Vue menyediakan pelbagai alatan dan fungsi untuk memudahkan penapisan dan pengisihan data. Sifat yang dikira memudahkan untuk menjana tatasusunan data baharu yang mengandungi hanya item data yang memenuhi kriteria. Pengisihan boleh dicapai menggunakan kaedah pengisihan JavaScript, atau dengan menyesuaikan fungsi perbandingan dalam sifat atau kaedah yang dikira. Fungsi ini boleh membantu kami memproses data dengan lebih baik dan meningkatkan pengalaman pengguna serta kecekapan pembangunan. Sudah tentu, dalam projek sebenar, kami juga boleh melakukan lebih banyak pengoptimuman dan pengembangan mengikut keperluan khusus.

Atas ialah kandungan terperinci Cara melaksanakan penapisan dan pengisihan data dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!