Tutorial asas VUE3: menggunakan penapis untuk penapisan data

VUE3 kini merupakan rangka kerja yang popular dalam pembangunan bahagian hadapan. Fungsi asas yang disediakannya boleh meningkatkan kecekapan pembangunan bahagian hadapan. Antaranya, penapis ialah alat yang sangat berguna dalam VUE3 Menggunakan penapis boleh menapis, menapis dan memproses data dengan mudah.

Jadi apakah itu penapis? Ringkasnya, penapis ialah penapis dalam VUE3. Ia boleh digunakan untuk memproses data yang diberikan untuk membentangkan hasil yang lebih diingini dalam halaman. Penapis ialah fungsi yang boleh digunakan dalam templat Ia mengembalikan hasil yang diproses dengan menghantar data dan beberapa parameter. Malah, banyak operasi dalam pembangunan harian kita boleh dipermudahkan melalui penapis.

Mari kita pelajari cara menggunakan penapis untuk penapisan data.

Mula-mula kita perlu mentakrifkan atribut penapis dalam tika VUE3 Kita boleh mentakrifkan berbilang fungsi dalam atribut ini sebagai penapis kita. Contoh mudah disediakan di bawah dalam contoh, kami menggunakan fungsi penapis VUE3 untuk menukar data input kepada huruf besar:

<div id="app">
    <input type="text" v-model="input">
    <p>输出结果：{{input | uppercase}}</p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
      data() {
        return {
          input: ''
        }
      },
      filters: {
        uppercase(val) {
          return val.toUpperCase();
        }
      }
    })

    app.mount('#app')
</script>

Dalam contoh di atas, kami mula-mula menggunakan model v untuk menukar input The data label terikat pada atribut input yang ditakrifkan dalam contoh kami. Kemudian, penapis dirujuk dalam halaman dengan nama huruf besar. Akhir sekali, fungsi penapis huruf besar ditakrifkan dalam contoh VUE3 Fungsi utama fungsi ini adalah untuk menukar aksara kepada huruf besar.

Apa yang perlu diperhatikan di sini ialah kita boleh mentakrifkan berbilang fungsi dalam penapis Pada masa yang sama, kita juga boleh menggunakan berbilang penapis dalam teg yang sama dengan menambahkan bar menegak selepas nama penapis dan seterusnya nama penapis.

Selain penukaran rentetan dalam contoh di atas, penapis juga boleh digunakan untuk memformat jenis data seperti tarikh, mata wang, nombor, dsb. Sebagai contoh, kita boleh menggunakan fungsi penapis untuk menukar cap masa ke dalam format masa standard, kodnya adalah seperti berikut:

<p>输出结果：{{time | timestampToDate}}</p>

...

filters: {
    timestampToDate(val) {
      const date = new Date(Number(val));
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}-${month}-${day}`;
  }
}

Kami juga boleh melaksanakan beberapa logik khas melalui penapis, seperti harga diskaun:

<p>输出结果：{{price | discount(0.8)}}</p>

...

filters: {
    discount(val, discountRate) {
      return val * discountRate;
  }
}

Seperti yang ditunjukkan dalam kod di atas, fungsi diskaun dalam penapis agak berbeza daripada contoh sebelumnya Ia menggunakan dua parameter Apabila digunakan dalam templat, isikan kadar diskaun dalam kurungan kedua. Berdasarkan kesan pelaksanaan, parameter yang diluluskan akan menggantikan nilai val dalam fungsi penapis.

Untuk meringkaskan, menggunakan penapis VUE3 boleh memproses data dengan mudah, supaya pemformatan data halaman dan pemprosesan logik dapat dilaksanakan dengan cepat. Dalam pembangunan sebenar, kami boleh mentakrifkan pelbagai fungsi penapis yang berbeza mengikut keperluan untuk melengkapkan pemprosesan data dengan lebih cekap dan mudah.

Atas ialah kandungan terperinci Tutorial asas VUE3: menggunakan penapis untuk penapisan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!